jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

jQuery Thumbnail with Zooming Image and Fading Caption Tutorial


jQuery Thumbnail with Zooming Image and Fading Caption Tutorial

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

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

51 comments

Eric
Wed, 26th August 2009
Kevin! Nice! You are one ahead of me on submissions!
I do have a nice site, actually its Demian's site, or DLB

One tutorial, along the lines of this one is:http://www.configuracionvisual.com/category/videos/

Next, check out his site logo sprite effect.
Then his lavalamp navigation is phenomenal!

His social networking mouseovers are sweetly animated

And his tooltip like PORTFOLIO mouseover is awesome! Reply
kevin Admin
Wed, 26th August 2009
yea, I saw it, it's pretty sweet, lot of them are fade in and fade out effect (logo and social bookmarking). The lava lamp menu is pretty sweet, if you look at my lava lamp tut, that can be achieve by replacing the box to an image look like that as well.

However, I really like the spotlight effect, I guess I will make a tut bout it. Thanks eric! Reply
Balaji
Wed, 26th August 2009
Wow, I hadn't thought about it that way before. Good write up, very clearly written. Have you written previously about jQuery Thumbnail with Zooming Image and Fading Caption Tutorial? I'd love to read more. Reply
kevin Admin
Wed, 26th August 2009
Hi Balaji, I have a similar post called : Create a thumbnail gallery with slick heading and caption effect.

http://www.queness.com/post/484/create-a-thumbnail-gallery-with-slick-heading-and-caption-effect-with-jquery Reply
dj münchen
Thu, 27th August 2009
Aha-wieder was gelernt
Gruss aus Bayern Reply
Eric
Thu, 27th August 2009
Balaji, If you have anything jQuery related in terms of how to do something, Kevin can get you the answer, demo or whatever quickly!
Kevin offers great commenting in his tuts as well!
If you find effects that you are curious about, submit to Kevin and he will help you see the light! LOL
Kevin, hope it is ok to promote you like this! You have just totally helped me a lot! Reply
kevin Admin
Thu, 27th August 2009
Haha, Eric, thanks for your compliments. it's alright, I will try my best to be helpful. ;) Reply
Dan Whitmore
Fri, 28th August 2009
Really nice effect, I'll definitely use this!

Thanks Kevin,

Dan Reply
web designer
Tue, 29th September 2009
thanks Reply
Kelly
Sun, 11th October 2009
This is very neat, I\'m going to add this to my wordpress blog for thumbnails in the sidebar.

I\'m a newbie to javascript, but have read for SEO, the code should not be added to the page itself but rather as an external file.

The reason for this is that when Google comes to the page, it doesn\'t have to load the code each time.

My question is if I take the code and put in in an external file (test.js), how do I call it from the html page? Reply
Raja
Wed, 18th May 2011
you need to include the external JS file in Head tag like this

<script src="/JS/jQGridList.js" type="text/javascript"></script>
Reply
nate
Sat, 28th May 2011
This is VERY cool...
I'm trying to add this to my wordpress. how would i implement the code in to the loop?
forgive my nubie-ness Reply
kevin Admin
Sun, 11th October 2009
Hi Kelly, yea, you should make it external to keep the html page clean. I did it in tutorial because it\'s easier to maintain and read.

Just open this page source\'s code, inside the head tag, you will able to see how I did that. :) cheers Reply
designzzz Admin
Tue, 13th October 2009
hi designzzz: try to download the zip file copy, it has all the files you need. Make sure my version work in ur browser, and then modify it. :) Reply
designzzz
Tue, 13th October 2009
Hiiz, its a very neat way for thumbnails. i tried it by carefully copy psting a few times and also by changing image names to the originals but it doesnt animate. im not sure why. Reply
pakistani designerpk
Wed, 13th January 2010
Hi this is great thanks for sharing. Reply
Brian Yerkes
Sun, 17th January 2010
Figured it out....I think you need to add -ms-interpolation-mode: bicubic; to fix IE's bicubic scaling Reply
Brian Yerkes
Sun, 17th January 2010
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
Thu, 21st January 2010
it is a verry nice tool,
but how can i create the hover effect in IE. Reply
Katja
Thu, 21st January 2010
sorry i mean the transparent effect in IE Reply
Kim
Mon, 25th January 2010
It's remarkable application of jquery. It works well on my old IE6 and FireFox 1.5,
Thanks,

Kim Reply
CJ
Sat, 17th April 2010
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
Mon, 26th April 2010
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
Tue, 27th April 2010
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
Tue, 24th August 2010
@Sergei: I'm not sure what's happening. Have you downloaded the demo? The demo works just fine. Reply
Sergei
Tue, 24th August 2010
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
Tue, 20th March 2012
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
Wed, 10th November 2010
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
Tue, 11th January 2011
wow amazing work Reply
John Q
Thu, 3rd March 2011
Pretty amazing! Trying to figure out how to get this working with lightbox and it's proving to be very difficult though :( Reply
kristen
Tue, 5th April 2011
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
Wed, 6th April 2011
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
Fri, 22nd April 2011
So usefull and so simple!
Gotta love jQuery Reply
John
Sat, 25th June 2011
Very nice, but how do you center them rather than have them pushed to the left side of page?
thanks Reply
Kevin Liew Admin
Mon, 27th June 2011
Please refer to the reply above. Reply
Jojo Bean
Sun, 26th June 2011
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
Mon, 27th June 2011
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
Tue, 28th June 2011
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
Tue, 28th June 2011
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
Tue, 28th June 2011
I did put the '=' sign in the class="divout" , that was a typo. Reply
Jojo Bean
Tue, 28th June 2011
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
Fri, 25th November 2011
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
Tue, 6th December 2011
Hi, i just want to say "THANK YOU" whoever did this, i'm so happy you saved my life :D Reply
LR
Fri, 16th March 2012
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
Wed, 21st March 2012
it's from center.... Reply
rita
Thu, 5th April 2012
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
Thu, 6th December 2012
How could I redirect to another page when I click over image.
Thanks Reply
trevor
Thu, 2nd May 2013
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
Thu, 14th November 2013
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
Sat, 1st June 2013
Hello,
Very nice.
Is it possible to integrate this effect in slimbox or lightbox gallery?
Thanks for your work Reply
pubudu
Mon, 5th August 2013
thank you very much.. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement