title: jquery picture overlay roll-up
body: <p>Just putting together a small script that rolls up a description over a photo.  It works fine however it's limitation is that the amount that it rolls up is a hard coded number.  So if the caption is only 1 line it works fine but if the caption is 2 lines then it (obviously) doesn't move up enough.</p>
  
  <p>So what I would like to happen is have it so that on rollover the caption div rolls up so that the whole thing shows up. No matter how many lines it is.</p>
  
  <p>jquery:</p>
  
  <pre><code>$(".hoverImage").hover(
  function(){
      $(this).find(".overlay").animate({top: "108"}, 500 );
  },
   function(){
      $(this).find(".overlay").animate({top: "126"}, 500 );
  });   
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>    &lt;div class="hoverImage"&gt;
      &lt;div class="overlay"&gt;
      Headline Goes Here&lt;br&gt;Story text goes here&lt;a href=""&gt;[learn more...]&lt;/a&gt;
      &lt;/div&gt;
      &lt;img src="http://www.ABCDEFG.com/slice.jpg" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>&lt;style&gt;
  .hoverImage{
  width: 228px;
  height: 151px;
  overflow: hidden;
  position: relative; 
  float:left;
  margin-right:10px;  
  }
  .overlay{
  width:220px;
  color: #ffffff;
  background: url("http://www.ABCDEFG.com/blackBg.png") repeat scroll 0 0 transparent;
  position: absolute;
  padding-left: 5px;
  top: 126px;
  }
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/vWeXU/" rel="nofollow">you can see the example and fiddle here</a></p>