Create a Thumbnail with Fading Caption Using jQuery

Written by Kevin Liew on 20 Oct 2009
259,633 Views • Tutorials

Introduction

Hi all, today we are going to learn to create another thumbnail effect with fading and transparent caption. It's simple and obviously I have running out of ideas in jQuery tutorial because this is similar to jQuery Thumbnail with Zooming Image and Fading caption. If you have any suggestion about tutorial, please contact me

Before we begin, I have already made different effect for thumbnail, you can check it out:

1. HTML

First of all, HTML. it's easy to understand, all your caption/description of the thumbnail should put inside the caption class.

<div class="item">
	<a href="#"><img data-src="image.gif" alt="title" title="" width="125" height="125"/></a>
	<div class="caption">
		<a href="">Title</a>
		<p>Description</p>
	</div>
</div>

2. CSS

I have put comment on each important CSS. However, if you want to learn more about CSS, you can visit my following posts:

body {
	font-family:arial;	
}

.item {
	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;
}

.item .caption {
	width:125px;
	height:125px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

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

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

}

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

.item .caption p {
	padding:5px;	
	margin:0;
	font-size:10px;
}

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

.clear {
	clear:both;	
}

3. Javascript

I have declared two variables called move and zoom. Move variable is for the top and left value of the thumbnail, if you mouse over the image, the image will move according to the value you have set (i make it move to left, so after the zooming, it'll always display in center). And for the second variable - zoom, it's the value you need to set if you want to enable the zooming effect. Currently, it's set to 1.2 which will enlarge the image to 120%. Simple, and for the rest of the code I have added comments above it. If you have any question, please drop me a comment.

$(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
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		width = $('.item').width() * zoom;
		height = $('.item').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':$('.item').width(), 'height':$('.item').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, bookmark it and help me to spread this tutorial to our friends! :) 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.

68 comments
Libin V Babu 12 years ago
Hi,
Thank You so much buddy. It simply works fine.
I have one question. I am using this in my gallery and it contains 100s of images. How can I implement a pagination on it?
Reply
Kevin Liew Admin 12 years ago
Not so sure how, but this can give you a headstart:
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/
Reply
Aamir 12 years ago
thank you soooo mcuh , u make my day bro. <3
Reply
Jeswin Simon 12 years ago
How can I have more than 3 images in a single row?
Reply
Kevin Liew Admin 12 years ago
of course, you can have as many as you want. I put 3 for demonstration only.
Reply
giovanni 12 years ago
i have a complicated question: i have in my web site a jcarousel with sliding image. the image is not in my folder byt it is read from an external url. can i use the captions inside the jcarousel ?
Reply
Boben 12 years ago
Thanks for this tutorial. How can I put a link on the pictures ? When i click on an image, i want to open a page.
Reply
Kevin Liew Admin 12 years ago
The easier way would be. create an A tag, make it display block and position absolute it to 0,0. then set the width and height to fill the whole square box, of course make the z-index to topmost.

something like this
.item .caption a {
width:125px;
height:125px;
position:absolute;
left:0;
top:0;
z-index:1000;
text-indent:-999em;
}
Reply
Matt 12 years ago
Hi. I have a huge problem, and can't seem to fix it. my caption div isn't displaying over my image. it's nested inside the image div, yet the captions are displaying underneath the image, causing other images around it to shift all over the place. can't seem to fix it. please help.
preview: http://www.goodbye-moderation.com/secret/selected.html

?
Reply
Roland Goovers 12 years ago
i have the same problem.
The image get bigger and bigger wen i get over the image en the caption get under the image...
Help whats's the solution?
Reply
Nilton Andrade 12 years ago
Is there a way to use it in a specfic set of images?
Reply
Kevin Liew Admin 12 years ago
Yes, just change the path of the images.
Reply
alex 11 years ago
can anyone guide me to display something like this on a wordpress post? I uploaded the .js file to my themes .js folder, i pasted the exact html from the index file using the tiny mce html editor, and I changed the src files of the pictures to my own. The pics load fine, but no special fx....Im a newbie at this so any help would be greatly appreciated.
Reply
Mac 12 years ago
Love this effect! How would you go about adjusting it for several different thumbnail SIZES in one site?
Reply
Anton 12 years ago
Firstly, thanks for the tutorial man, really cool.

Secondly, hope you can help me fixing this problem. I use this with quicksand, at first it worked just fine, but ever since I click on one of the filter tag to filter the images, it stops working, nothing happen when I hover over. Is there any way can I get this to work with quicksand or other jquery?

Thanks very much man.
Reply
Andrew 11 years ago
Does anyone know how to use this for different size images, without having to copy the javascript and css for each image?
Reply
Habib 11 years ago
I would also like to know if this is possible, thanks
Reply
a_muranaka 11 years ago
thanks a lot! it's so much great and cool!!
Reply
Mitch 11 years ago
Whats the best way to handle images of different dimensions?
Reply
Miko 11 years ago
It took me all night, but I found why this didn't work for me. In line 59 of your css you have "img { ..." and it works for me only with ".item img {...". I don't know how everyone else spotted that but it threw me ...

Thanks for the work


Miko
Reply
Lyudmi Lesichkov 10 years ago
Good catch! "img { ..." would be if you guys use only this script and nothing else on the page!

Please fix it to .item img{...
Reply