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
Tue, 20th October 2009
superb! Reply
mkjones
Tue, 20th October 2009
Dang! I just spend a few hours coding a sliding effect but this is FAR better. Where were you yesterday! Reply
rimmer
Tue, 20th October 2009
This is just beautiful! Thank you so much for taking the time to share these great jQuery-tuts :) Reply
Mad Max
Tue, 20th October 2009
Excellent! Simple and effective.
thanks for sharing. Reply
Jay Garcia
Tue, 20th October 2009
Pretty cool! Reply
Michael Thompson
Tue, 20th October 2009
Mad Max
Tue, 20th October 2009
@kevin
You can center images moving it left and top by the same amount of pixel, only if you have square images (as in your example).
So i\'v made a little modification to your js, to have these offsets auto-calculated based on zoom level and regardless of image proportions:

var zoom = 1.2;
moveh = ($j(\'.banner\').width()-($j(\'.banner\').width() * zoom))/2; //negative value
movev = ($j(\'.banner\').height()-($j(\'.banner\').height() * zoom))/2; //negative value

and then use these 2 value in the animate parameters.

Hope it can be useful. Reply
SohelElite
Wed, 21st October 2009
thanks for sharing.. Great Reply
Hung Bui
Wed, 21st October 2009
Wow very nice in deed. Thanks for sharing this. Reply
scvinodkumar
Thu, 22nd October 2009
Fantastic!!!!. This is great!!!! Reply
Matthew
Fri, 23rd October 2009
Thanks Kevin. I already have a project in mind to use this on. Reply
tutorial blog
Fri, 30th October 2009
thank Reply
kevin Admin
Tue, 3rd November 2009
@mike, yea, just remove this line:
# //Move and zoom the image
$(this).find(\'img\').stop(false,true).animate({\'width\':width, \'height\':height, \'top\':move, \'left\':move}, {duration:200});

and also the script to reset the image. it will work :) Reply
mike
Tue, 3rd November 2009
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
Tue, 3rd November 2009
hello -

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

thanks,
mike Reply
davetiye
Mon, 16th November 2009
superrr ! thank. Reply
Mia
Wed, 16th December 2009
Great tut K. , you write code w/ the skill of a surgeon : Clean & precise ! Reply
Mia
Wed, 16th December 2009
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
Wed, 16th December 2009
hi mia, thanks! but how can I set it to @quenesswebblog huh? Reply
kevin Admin
Thu, 17th December 2009
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
Thu, 17th December 2009
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
Thu, 17th December 2009
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
Thu, 17th December 2009
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
Thu, 17th December 2009
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
Fri, 18th December 2009
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
Tue, 29th December 2009
Is there any way to make the images auto-rotate? Reply
Felipe Perry
Tue, 5th January 2010
Thanks for sharing!! Reply
Sivaranjan
Wed, 26th May 2010
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
Mon, 21st June 2010
Thank you very much! Reply
Raghibsuleman
Mon, 17th January 2011
Nana
Thu, 23rd June 2011
How to make more boxes?? i tried to change the item class to item1 but it does not work.. Reply
Kevin Liew Admin
Mon, 27th June 2011
no, you don't have to change the item class name. Just duplicate the HTML and it should work. Reply
Afonso Gomes
Sat, 16th July 2011
Is there any way of making the all caption block clickable ? Reply
Kevin Liew Admin
Sun, 17th July 2011
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
Sun, 21st August 2011
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
Sun, 21st August 2011
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
Mon, 5th September 2011
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
Fri, 9th September 2011
thank You so much mate !!! Reply
Anthony
Mon, 24th October 2011
How do you implement this into Wordpress? Any suggestions? Thanks! Reply
Berkan
Tue, 22nd November 2011
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
Tue, 31st January 2012
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
Tue, 8th January 2013
I am also having the same issue, though it's not doing anything when I hover over. I'm confused. Reply
Libin V Babu
Wed, 1st February 2012
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
Tue, 7th February 2012
Not so sure how, but this can give you a headstart:
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/ Reply
Aamir
Thu, 15th March 2012
thank you soooo mcuh , u make my day bro. <3 Reply
Jeswin Simon
Mon, 19th March 2012
How can I have more than 3 images in a single row? Reply
Kevin Liew Admin
Wed, 21st March 2012
of course, you can have as many as you want. I put 3 for demonstration only. Reply
giovanni
Sun, 25th March 2012
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
Thu, 29th March 2012
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
Sun, 1st April 2012
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
Thu, 29th March 2012
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
Mon, 11th June 2012
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
Fri, 30th March 2012
Is there a way to use it in a specfic set of images? Reply
Kevin Liew Admin
Sun, 1st April 2012
Yes, just change the path of the images. Reply
alex
Thu, 14th March 2013
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
Thu, 10th May 2012
Love this effect! How would you go about adjusting it for several different thumbnail SIZES in one site? Reply
Anton
Mon, 16th July 2012
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
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