How can I get the second line of text to hide and show on hover? CSS only

[Stankia]

I have tried using text-indent but this only applies to the first line and if I use margin the text doesn't show at all, how else can I make the text show on hover? here is the codeHTML: \[code\]<img src="" width="270" height="182"/><figcaption> <ul> <div style="top:0px; left:0px;width=270 height=182"> <a href="">Title</a><BR> <a href="">Item 1</a><BR> <a href="">Item 2</a><BR> <a href="">Item 3</a><BR> <a href="">Item 4</a> </div> </ul></figcaption>\[/code\]CSS:\[code\].annotated{position:relative;}.annotated img{ display:block;}.annotated ul{ list-style:none;position:absolute; top:0;right:0;bottom:0;left:0;}.annotated div{display:block;padding:0 5px;width:270px; line-height:15px;position:absolute;text-indent:-99999px; cursor:default;}.annotated div:hover { background:#fff;background:rgba(255,255,255,0.75);z-index:2; width:260px;text-indent:0;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.25); -moz-box-shadow:0 0 5px rgba(0,0,0,0.25); box-shadow:0 0 5px rgba(0,0,0,0.25);}\[/code\]here is a fiddle