Fancy Thumbnail Hover Effect

Recently I was checking out some nice flash galleries and came across an effect that
I really liked. I had a sudden urge to duplicate that similar effect but using my bread
and butter (CSS and jQuery). I thought I’d share this and maybe some of you can
find it useful.

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 */
}

*Note – For more information about this property: -ms-interpolation-mode: bicubic, refer to Chris Coyier’s Bicubic Scaling fix for IE. For those who are using PNG files as the background, refer to my previous article, “PNG Transparency Fix in IE6“.

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);
});

*Note – To learn more about Animation Queue Buildup, read “Quick Tip: Prevent Animation
Queue Buildup” at www.LearnjQuery.com

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 as well. If you have any questions or comments, please don’t hesitate to let me know!