Thumbnail Effect w / jQuery

Ponerah- I was checking out some nice flash galleries and came across an effect that I really liked. I thought I’d share this and maybe some of you can find it useful.

Klik Image If You Want View DEMO

Build the Foundation – XHTML

Our markup will be fairly simple, just an unordered three columned list.

<ul class="thumb">
 <li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
 <li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dress it Up – CSS

Pay close attention to the positioning properties between the list item and the image. We have to make sure that the hovered image must be on top of the other images, so this part is key.

ul.thumb {
 float: left;
 list-style: none;
 margin: 0; padding: 10px;
 width: 360px;
}
ul.thumb li {
 margin: 0; padding: 5px;
 float: left;
 position: relative;  /* Set the absolute positioning base coordinate */
 width: 110px;
 height: 110px;
}
ul.thumb li img {
 width: 100px; height: 100px; /* Set the small thumbnail size */
 -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
 border: 1px solid #ddd;
 padding: 5px;
 background: #f0f0f0;
 position: absolute;
 left: 0; top: 0;
}
ul.thumb li img.hover {
 background:url(thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
 border: none; /* Get rid of border on hover */
}

Bring it to Life – jQuery

Basically all we are doing is animating the thumbnail’s size, absolute positioning coordinates (vertical alignment w/ css), and padding when we hover over. During this animation, we also switch the value of the z-index, so that the selected image stays on top of the rest.

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
 $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
  .animate({
   marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
   marginLeft: '-110px',
   top: '50%',
   left: '50%',
   width: '174px', /* Set new width */
   height: '174px', /* Set new height */
   padding: '20px'
  }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

 } , function() {
 $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
 $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
  .animate({
   marginTop: '0', /* Set alignment back to default */
   marginLeft: '0',
   top: '0',
   left: '0',
   width: '100px', /* Set width back to default */
   height: '100px', /* Set height back to default */
   padding: '5px'
  }, 400);
});

View DEMO

Conclusion

It may not be as smooth as the flash version, but its definitely a neat effect. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out

Good Luck


Credit By sohtanaka

Read more »