title: display a caption over an image using CSS and JQUERY
body: <p>I have the following jsfiddle but it doesnt seem to show the caption up:
  <a href="http://jsfiddle.net/KumcX/189/" rel="nofollow">http://jsfiddle.net/KumcX/189/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
      &lt;div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;"&gt;this is my caption&lt;/div&gt;
      &lt;a href="#"&gt;&lt;img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
  ul li div{display:none; background:white; opacity:.5; position:absolute;}
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$('ul li').mouseenter(function(){
      var image= $(this).find('a img'),
          caption = $(this).find('div');
  
      caption.width(image.width());
      caption.height(image.height());
      caption.fadeIn();
  }).mouseleave(function(){
       var image= $(this).find('img'),
          caption = $(this).find('div');
  
      caption.width(image.width());
      caption.height(image.height());
      caption.fadeOut();
  });
  </code></pre>
  
  <p>It should show the caption, but its not.. Any ideas?</p>