Help with a jQuery Image Hover

I have the following JS:

$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
   $(this).css({'z-index' : '10'});
   $(this).find('img').addClass("hover").stop()
      .animate({
         marginTop: '-84px',
         marginLeft: '-77px',
         top: '100%',
         left: '50%',
         width: '200px',
         height: '160px',
         border: '12px solid #1b150e',
         padding: '0px'
      }, 200);
   
   } , function() {
   $(this).css({'z-index' : '0'});
   $(this).find('img').removeClass("hover").stop()
      .animate({
         marginTop: '0',
         marginLeft: '0',
         top: '0',
         left: '0',
         width: '100px',
         height: '80px',
         border: '1px solid #ddd',
         padding: '5px'
      }, 400);
});

//Swap Image on Click
   $("ul.thumb li a").click(function() {
      
      var mainImage = $(this).attr("href"); //Find Image Name
      $("#main_view img").attr({ src: mainImage });
      return false;      
   });
 
}); 

PHP:

Here is how i print my images:

	  <ul class="thumb">
   <li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>   
   <li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
   <li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
</ul>

PHP:

I want to insert some text under the image, when the mouse is on it (Image hover). On this picture you can visualize what I actually want.



Thanks in advance, hope someone could help me

 

First , add the title tag to images , like :

<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" title="add something that you want to display under your picture" /></a></li>

HTML:

Add a div after the img tag with the text from title attribute , if the title attribute exists and contains a text and when hidding the image onblur just remove the div by its class name. Something like this :

$("ul.thumb li").hover(function() {
   $(this).css({'z-index' : '10'});
   $(this).find('img').addClass("hover").stop()
      .animate({
         marginTop: '-84px',
         marginLeft: '-77px',
         top: '100%',
         left: '50%',
         width: '200px',
         height: '160px',
         border: '12px solid #1b150e',
         padding: '0px'
      }, 200);
   var title = $(this).find('img').attr("title");
   if(title.length > 0)
    $(this).find('img').append('<div class="description">'+title+'</div>'); 
   } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
      .animate({
         marginTop: '0',
         marginLeft: '0',
         top: '0',
         left: '0',
         width: '100px',
         height: '80px',
         border: '1px solid #ddd',
         padding: '5px'
      }, 400);
    if($(this).find('.description').length > 0)
        $('.description').remove();   
   });

//Swap Image on Click
   $("ul.thumb li a").click(function() {
      
      var mainImage = $(this).attr("href"); //Find Image Name
      $("#main_view img").attr({ src: mainImage });
      return false;      
   });
 
});

HTML: