Fancy Thumbnail Hover Effect with CSS & jQuery

Build the Foundation – XHTML

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

<ul>
	<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

Fancy Thumbnail Hover Effect w/ jQuery

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.

About these ads
This entry was posted in jQuery and tagged , , , , , , , , , , , , . Bookmark the permalink.