title: Javascript Text On Mouse Enter
body: <p>I'm working on a sort-of-grid-style layout to promote products on my website. I have two different ideas, but I haven't been able to merge those ideas into one single code. The idea is to have images of different sizes covered by a black background with white letters (name of the product) that will fade-in when hovered by the mouse.</p>
  
  <p>Both my ideas:</p>
  
  <ul>
  <li><p><a href="http://jsfiddle.net/qrAr7/" rel="nofollow">http://jsfiddle.net/qrAr7/</a> </p>
  
  <pre><code>$('ul li').mouseenter(function(){
  var image= $(this).find('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>});</p></li>
  <li><p><a href="http://jsfiddle.net/yAfLU/" rel="nofollow">http://jsfiddle.net/yAfLU/</a></p></li>
  </ul>
  
  <p>I cleaned it up of the mess I made, almost back to the original draft.. The second link includes the JavaScript working, and the first includes what should be the two ideas merged. Once the top picture works, I'll know how to do the rest.</p>