This time with zoom and sliding caption.

HTML

<!-- start thumbnailWrapper div -->
<div class='thumbnailWrapper'>

 <ul>

  <li>
   <a href='#'><img src='images/1.jpg' /></a>
   <div class='caption'>
    <p class='captionInside'>CofeeNerd</p>
   </div>
  </li>

  <li>
   <a href='#'><img src='images/2.jpg' /></a>
   <div class='caption'>
    <p class='captionInside'>musiKings</p>
   </div>
  </li>

  <li>
   <a href='#'><img src='images/3.png' /></a>
   <div class='caption'>
    <p class='captionInside'>The Caribbean Energy</p>
   </div>
  </li>

  <div class='clear'></div><!-- clear the float -->

 </ul><!-- end unordered list -->

</div><!-- end spolightWrapper div -->

Nothing in the html worthy for special explanation. In the demo there are 9 list items but in the code above there are only 3, I removed 6 of them due to clarity of the HTML code.

CSS

.thumbnailWrapper ul {
 list-style-type: none; /* remove the default style for list items (the circles) */
 margin:0px; /* remove default margin */
 padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li {
 float:left; /* important: left float */
 position:relative; /* so we can use top and left positioning */
 overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
}
.thumbnailWrapper ul li a img {
 width:200px; /* not important, the pics we use here are too big */
 position:relative; /* so we can use top and left positioning */
 border:none; /* remove the default blue border */
}
.caption{
 position:absolute; /* needed for positioning */
 bottom:0px; /* bottom of the list item (container) */
 left:0px; /* start from left of the list item (container) */
 width:100%; /* stretch to the whole width of container */
 display:none; /* hide by default */
 /* styling bellow */
 background:#0c4b62;
 color:white;
 opacity:0.9;
}
.caption .captionInside{
 /* just styling */
 padding:10px;
 margin:0px;
}
.clear { clear:both; } /* to clear the float after the last item */

jQuery

$(window).load(function(){

 //set and get some variables
 var thumbnail = {
  imgIncrease : 100, /* the image increase in pixels (for zoom) */
  effectDuration : 400, /* the duration of the effect (zoom and caption) */
  /*
  get the width and height of the images. Going to use those
  for 2 things:
   make the list items same size
   get the images back to normal after the zoom
  */
  imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
  imgHeight : $('.thumbnailWrapper ul li').find('img').height()

 };

 //make the list items same size as the images
 $('.thumbnailWrapper ul li').css({

  'width' : thumbnail.imgWidth,
  'height' : thumbnail.imgHeight

 });

 //when mouse over the list item...
 $('.thumbnailWrapper ul li').hover(function(){

  $(this).find('img').stop().animate({

   /* increase the image width for the zoom effect*/
   width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
   /* we need to change the left and top position in order to
   have the zoom effect, so we are moving them to a negative
   position of the half of the imgIncrease */
   left: thumbnail.imgIncrease/2*(-1),
   top: thumbnail.imgIncrease/2*(-1)

  },{

   "duration": thumbnail.effectDuration,
   "queue": false

  });

  //show the caption using slideDown event
  $(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

 //when mouse leave...
 }, function(){

  //find the image and animate it...
  $(this).find('img').animate({

   /* get it back to original size (zoom out) */
   width: thumbnail.imgWidth,
   /* get left and top positions back to normal */
   left: 0,
   top: 0

  }, thumbnail.effectDuration);

  //hide the caption using slideUp event
  $(this).find('.caption').slideUp(thumbnail.effectDuration);

 });

});

One thing might confuse you in the jQuery, the caption slides up using the slideDown() function and it slides down using the slideUp() function. It’s not a mistake in the code, that’s how it should be.

Go to the jQuery page for slideDown function and check out the demo. You will notice that slideDown makes the hidden elements show, and slideUp makes them hide. Because we have positioned the caption on bottom, when we slideDown it stays at that same bottom position (bottom:0px) and because of that it’s being pushed up.