Create a Thumbnail with Fading Caption Using jQuery

Written by Kevin Liew on 20 Oct 2009
259,645 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
mike 14 years ago
kevin -

thanks for the prompt reply, i appreciate it.
basically, i\'m trying to \"mimic\" idea from the following site: http://odopod.com/ - if you scroll down a bit, you can see the pink styled boxes, etc. when you mouse over the effect changes and so on.

basically what you\'ve done in a matter of speaking.

thanks again, i appreciate it.
Reply
mike 14 years ago
hello -

is there a way to remove the \"zooming\" of the image?

thanks,
mike
Reply
davetiye 14 years ago
superrr ! thank.
Reply
Mia 14 years ago
Great tut K. , you write code w/ the skill of a surgeon : Clean & precise !
Reply
Mia 14 years ago
P.S: Kevin , you need to change your retweet button -make it point/ direct to your twitter username ( its presently RT @tweetmeme instead of @quenesswebblog ) you may want to change that :) Take care .
Reply
kevin Admin 14 years ago
hi mia, thanks! but how can I set it to @quenesswebblog huh?
Reply
kevin Admin 14 years ago
Hi Mia, hmm, I don\'t have the setting page for this and i\'m using a custom made blog platform. I think I will have to do it manually then. Can\'t believe I have been doing it without knowing how it works! haha
Reply
Mia 14 years ago
Hi Kevin, well - you will need to :
Go to your Plugins & choose : Settings/tweetmeme to configure the button so that it points to your twitter user-name by changing the source which you retweet, E.g. \"RT @yourname \" so <---here, you will place your twitter user-name : \"RT @quenesswebblog\" its that simple K. BTW: most WP blogs have this feature not set appropriately, so you are not alone . Hope this helps :) Catch you in cyberspace :D

Mia 
Reply
Mia 14 years ago
Its ok Kevin ( as I said :97% of WP users have not set this correctly ) ; if you have installed the RT Button manually , then it wont be a problem , but rather easier - since you know where you have placed it . All you will need to do is just find the same piece of code : RT @yourname and just replace that w/ yours . Im gonna try and post the .js code in here & I hope it goes through- so..here goes : [ if it fails -Im sorry :( ] ---><script type=\"text/javascript\">
tweetmeme_source = \'RT @quenesswebblog\';
</script>
<script type=\"text/javascript\" src=\"http://tweetmeme.com/i/scripts/button.js\"></script>

If it doesnt come through- I will find another way to send u the code :)

M.
Reply
Mia 14 years ago
Ok - it worked ! now all u need to do is place the single quotes to : \'RT @quenesswebblog\'; and just copy & paste this anywhere u had the RT Button - and it will be set . ( dont copy the ---> arrow :D ) so, ok- now ur set -catch u in cyberspace & tweet tweet ! :))
Reply
Mia 14 years ago
Kevin, here - go here @ http://help.tweetmeme.com/2009/04/06/tweetmeme-button/ scroll down to the second to last option : \"Changing the @username who is tweeted \" and you will not have a problem integrating this :) I just thought about this -:D
Reply
dlv 14 years ago
excellent Kevin ! I\'m using it in my sidebar right now !

One question...

In IE7 (and in other IE I suppose) I\'m having not translucent background (filter:alpha(opacity=80) seem to be not working) so I thougt to add \".fadeTo(\"fast\", 0.3);\" to \"//Move and zoom the image\" lines.

All work fine but I have a problem with the syncronizations jeje... First, the Description appear, and when it finished, then the IMG fade to 0.3.

I try a lot, I\'m sure I\'m close...but I can get all the animations running at the same time, any suggestion ?

Thanks in advance,
thanks as always for share this masterpiece of jquery \"better - interfase\" !
Reply
Blaise Henry 14 years ago
Is there any way to make the images auto-rotate?
Reply