Create a Thumbnail with Fading Caption Using jQuery

Written by Kevin Liew on 20 Oct 2009
259,637 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
Felipe Perry 14 years ago
Thanks for sharing!!
Reply
Sivaranjan 14 years ago
Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.
Reply
Joonas 14 years ago
Thank you very much!
Reply
Raghibsuleman 13 years ago
Nana 13 years ago
How to make more boxes?? i tried to change the item class to item1 but it does not work..
Reply
Kevin Liew Admin 13 years ago
no, you don't have to change the item class name. Just duplicate the HTML and it should work.
Reply
Afonso Gomes 13 years ago
Is there any way of making the all caption block clickable ?
Reply
Kevin Liew Admin 13 years ago
there are two ways, for css, you will need A tag (display block, set width and height the same size as the item, position absolute it to top 0, left 0)...

the other way, uses javascript. put click event. after that add something like this:
window.location = $(this).find('a').atr('href');
Reply
Ciprian 13 years ago
Is there a way to do it the other way around(show first the caption and onhover the image)? What do i need to change? Thx
Reply
Ciprian 13 years ago
I tried this and apparently it's working.

$(document).ready(function() {
$().ready(function() {
//Display the caption onload
$('.item').find('div.caption').stop(false,true).fadeIn(1);
});

$('.item').hover(function() {

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

},
function() {
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
});

});
Reply
jluisfg 13 years ago
Thanks a million! I tried like three other plugins before I found this tut, really simple and it has a really cool effect. thanks!!!
Reply
divya 13 years ago
thank You so much mate !!!
Reply
Anthony 12 years ago
How do you implement this into Wordpress? Any suggestions? Thanks!
Reply
Berkan 12 years ago
Does this work with Jquery v1.4.4? I'm trying to implement this in Drupal 7. It works with the Jquery file you supplied but then some of the functions (like ajax) won't work in Drupal,
Reply
Jake 12 years ago
This is exactly what I've been looking for, thank you. However, I'm having one problem.. When I first load the page, all my images are only taking up half of the box, the other half is transparent. But after I hover over it, etc., the images are in the correct place. Any idea what's happening?
Reply
Casper 11 years ago
I am also having the same issue, though it's not doing anything when I hover over. I'm confused.
Reply