title: How to make text appear on top of the image when hovering?
body: <p>When a mouse hovering over the image, the image will be blurred and there will be text showing up on top of the image. I tried it myself using the code below but it appeared that the "text" move outside the image when hovering
  ...can anyone tell me why?</p>
  
  <p>Code:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;span class ="row_1"&gt;
  &lt;a href="#"&gt;
  &lt;div class = "caption"&gt; testing &lt;/div&gt;
  &lt;img class = "img_link" src="image/food/food1.jpg" /&gt;
  &lt;/a&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.caption
  {
  display: none;
  }
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>    $('a').hover(
      function(){
      var image = $(this).find('img'),
       caption = $(this).find('div');
       caption.width(image.width());
       caption.height(image.height());
       caption.fadeIn();
      },
      function(){
       var image= $(this).find('img'),
          caption = $(this).find('div');
  
      caption.width(image.width());
      caption.height(image.height());
      caption.fadeOut();
  });
  </code></pre>