jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

Written by Kevin Liew on 26 Aug 2009
338,979 Views • Tutorials

Introduction

I came across quite a lot of CSS gallery websites that using huge thumbnail to showcase beautiful websites. Some of them are just ordinary thumbnail, but a lot of them have javascript animated caption to convey more information to viewers. In this tutorial, we will learn how to make ordinary thumbnail to something more. This is my second tutorial about thumbnail gallery, if you missed the first one, you might want to read it later - Create a thumbnail gallery with slick heading and caption effect.

1. HTML

 

<div class="zitem">
	<a href="#"><img data-src="1.jpg" alt="Test 1" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 1</a>

	</div>
</div>

<div class="zitem">
	<a href="#"><img data-src="2.gif" alt="Test 2" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 2</a>

	</div>
</div>

<div class="zitem">
	<a href="#"><img data-src="3.png" alt="Test 3" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Test 3</a>

	</div>
</div>

2. CSS

I have added inline comment in the following CSS code. If you want to learn more about CSS, read my previous post 15 CSS Tips and Tricks or, you want to know MORE ABOUT CSS, read my new post - 15 Ways to Optimize CSS and Reduce CSS File Size

.zitem {
	width:125px;
	height:125px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:125px;
	height:30px;
	background:#000;
	color:#fff;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

3. Javascript

This is a simple jQuery script with hover effect. What we have to do is calculate the width and height and set it to the image.

	
$(document).ready(function() {

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

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

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

});

Conclusion

Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

51 comments
pakistani designerpk 15 years ago
Hi this is great thanks for sharing.
Reply
Brian Yerkes 15 years ago
Figured it out....I think you need to add -ms-interpolation-mode: bicubic; to fix IE's bicubic scaling
Reply
Brian Yerkes 15 years ago
This is really nice. One little thing is that the zoom effect looks pretty ugly in IE7 (the image gets pretty pixelated), haven't tested it in other versions of IE tho. Looks nice in Chrome and FF.

Any ideas why the images get distorted in IE7 (other than the fact the IE sucks! ) ?
Reply
Katja 15 years ago
it is a verry nice tool,
but how can i create the hover effect in IE.
Reply
Katja 15 years ago
sorry i mean the transparent effect in IE
Reply
Kim 15 years ago
It's remarkable application of jquery. It works well on my old IE6 and FireFox 1.5,
Thanks,

Kim
Reply
CJ 15 years ago
Does anyone know how to center all the thumbnails? I'm trying to do something similar with my website, and I've found this: http://www.pmob.co.uk/pob/centred-divs.htm

However, I still can't seem to get it to work. Any help would be greatly appreciated!
Reply
Aj 15 years ago
I'd like to make it so the thumbnail crops instead of resizes when I have non square image. I cannot seem to find where to adjust this.. can it be done?
Reply
kevin Admin 15 years ago
Hi Aj, you can't really crop the image... hmm, unless you set it as a background image, but unfortunately, this script can't do it.
Reply
kevin Admin 14 years ago
@Sergei: I'm not sure what's happening. Have you downloaded the demo? The demo works just fine.
Reply
Sergei 14 years ago
Nice work,

Although I can't get it working right, because all my images are shifted half-width right from it's parent container. This bug dissapear as soon as I mouseover it and the top:0; left:0 css gets added inline to it. Is there any solution
Reply
Happy 13 years ago
I had the same problem and used this to fix it:

.zitem img {
border:0;
/* allow javascript moves the img position */
position:absolute;
top: 0px;
left: 0px;
}
Reply
Carlos Cunha 14 years ago
Hello, i´m a newbie in this area, i want create a menu inside a article like the demo, but when people past the mouse houver the image i cant click ando go to other page, its possible??

Regards
Reply
kum 14 years ago
wow amazing work
Reply