jQuery(document).ready(function() {

 //move the image in pixel
 var move = -4;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.0;

 //On mouse over those thumbnail
 jQuery('.zitem').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = jQuery('.zitem').width() * zoom;
  height = jQuery('.zitem').height() * zoom;
  
  //Move and zoom the image
  jQuery(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  jQuery(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  jQuery(this).find('img').stop(false,true).animate({'width':jQuery('.zitem').width(), 'height':jQuery('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  jQuery(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});