Create a Thumbnail with Fading Caption Using jQuery

Create a Thumbnail with Fading Caption Using jQuery


Create a Thumbnail with Fading Caption Using jQuery

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

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

66 comments

Andrew
Wed, 24th October 2012
Does anyone know how to use this for different size images, without having to copy the javascript and css for each image? Reply
Habib
Fri, 18th January 2013
I would also like to know if this is possible, thanks Reply
a_muranaka
Tue, 15th January 2013
thanks a lot! it's so much great and cool!! Reply
Mitch
Wed, 10th April 2013
Whats the best way to handle images of different dimensions? Reply
Miko
Mon, 1st July 2013
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
Thu, 26th September 2013
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
Thiago
Wed, 18th September 2013
How can I make the code work in onclick event?
Reply
Paul
Thu, 31st October 2013
It seems that there's a line of code missing in the .css file, ".item .caption" section. After the .left: 0 add .top: 0 to prevent the error in Chrome rendering (firefox works well even without it:)) Reply
rakesh
Mon, 10th March 2014
Thanks Man ...Its Wonderfull for small banners i wld say 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