title: How can I get the second line of text to hide and show on hover? CSS only
body: <p>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 code</p>
  
  <p>HTML:
      </p>
  
  <pre><code>&lt;img src=""  width="270" height="182"/&gt;
  
  &lt;figcaption&gt;
   &lt;ul&gt;
    &lt;div style="top:0px; left:0px;width=270 height=182"&gt;
  
  
    &lt;a href=""&gt;Title&lt;/a&gt;&lt;BR&gt;
    &lt;a href=""&gt;Item 1&lt;/a&gt;&lt;BR&gt;
    &lt;a href=""&gt;Item 2&lt;/a&gt;&lt;BR&gt;
    &lt;a href=""&gt;Item 3&lt;/a&gt;&lt;BR&gt;
    &lt;a href=""&gt;Item 4&lt;/a&gt;
    &lt;/div&gt;
  
  
   &lt;/ul&gt;
  
  &lt;/figcaption&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><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></pre>
  
  <p><a href="http://jsfiddle.net/bKejV/1/" rel="nofollow">here</a> is a fiddle</p>