jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

Written by Kevin Liew on 26 Aug 2009
338,981 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
John Q 14 years ago
Pretty amazing! Trying to figure out how to get this working with lightbox and it's proving to be very difficult though :(
Reply
kristen 14 years ago
Can some one tell me how i can link the text or add an image to were the text is on the zoom in/ mouse over??? please and thank you.
Reply
Kevin Liew Admin 14 years ago
You can put your link in:

<div class="caption">
<a href="">Here</a>
</div>

Not sure about image thou, I don't think it will fit.
Reply
Jonas 14 years ago
So usefull and so simple!
Gotta love jQuery
Reply
John 13 years ago
Very nice, but how do you center them rather than have them pushed to the left side of page?
thanks
Reply
Kevin Liew Admin 13 years ago
Please refer to the reply above.
Reply
Jojo Bean 13 years ago
Any idea on how to center the boxes rather than float:left ?? Float:center lines them up on top of each other
Reply
Kevin Liew Admin 13 years ago
to center the boxes, you need to wrap them with another div. after than, set width and set margin:0 auto to the new div you've just created.
Reply
Jojo Bean 13 years ago
Thank you. Doesn't seem to work, here's what I did
<style>
..... (added above .zitem in style)
.divout {
border: solid 1px #aaa;
width: 100%;
margin:0px auto;
}

.zitem.......

<div class"divout">
<div class="zitem"> .....

I'm very noobish, I have kept everything else the same ..float left etc in .zitem. Any further help appreciated.
Thanks
Reply
Jojo Bean 13 years ago
the boxes inside the outer div still float left, they don't center to the outer box(outer div). Reducing the percentage to shrink the box (100% to whatever closes it in the most to the inner, works to some degree but with different screen resolutions you get different results. Removing float left in .zitem stacks them vertically. Thank you.
Reply
Jojo Bean 13 years ago
I did put the '=' sign in the class="divout" , that was a typo.
Reply
Jojo Bean 13 years ago
I have managed to center it by doing the following:

divout{
width:100%;
border:1px solid #222;
margin:0px auto ;
white-space: nowrap;
text-align: center;
}

.zitem {
width:170px;
height:100px;
border:1px solid #222;
margin:5px 5px 5px 0;
text-align: left;
white-space: normal;
letter-spacing: normal;

/* required to hide the image after resized */
overflow:hidden;

/* for child absolute position */
position:relative;

/* display div in line */
display: inline-block;
vertical-align: middle;


}
/* this makes it compatible with IE 7 and below since IE doesnt understand inline-block
.zitem {
*display: inline;
*margin: 5px 5px 5px 5px;

}

Then make sure to double div...
<div class="divout">
<div class="zitem"> ......

hope that helps
Reply
hush 13 years ago
Hi, I'm using this script on a page where I have a list of projects hyperlinked on one side and images of the projects on the other side of the screen. I am using this script to give a text description when you role over the images but I would also like the script to underline the relevant text link on the text navigation when hovered over. I would also like this to work in reverse where if a text link is hovered over it initiates the text showing over the image. Hope this makes sense. Any ideas??
Reply
arturo 13 years ago
Hi, i just want to say "THANK YOU" whoever did this, i'm so happy you saved my life :D
Reply
LR 13 years ago
I love this tutorial it's brilliant. The only thing I would like to be able to do is have the image zoom from the center rather than the top left as it does at the moment. Is that possible? I would be eternally grateful if somebody could help me out on this one?
Reply
Kevin Liew Admin 13 years ago
it's from center....
Reply
rita 13 years ago
Hi,
i love this css trick, but unfortunately i can t make it work that the zooming appears from the center. .it seemed to work at the first try, but then it simply zooms in the upper left corner...

i copied your code...
any help?
Reply
Tito 12 years ago
How could I redirect to another page when I click over image.
Thanks
Reply
trevor 12 years ago
I don't know if this is still tended to, but I am having a hard time getting this to work on my page.

in the css, the img {
border:0;

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

messes with my banner image and messes up the whole page. I've tried to change it to

.zitam img{ }
but it doesn't work, it doesn't stack the images on top of one another like it does without .zitam, but the caption doesnt work.

I've done this as a test page, where it was blank and i added minimal code toyours and it worked, but i can't get tit with code i already hav.
Reply
saif 11 years ago
Now I'm no pro, but i believe you spelt zitem wrong. You spelt it zetAm with an A instead of and E. Oh and i lied, i am a pro.

Good day.
Reply
Jasmine 11 years ago
Hello,
Very nice.
Is it possible to integrate this effect in slimbox or lightbox gallery?
Thanks for your work
Reply