Use your left/right keys to browse tutorials
jQuery image zoom effect

jQuery image zoom effect

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on December 14, 2009

I recently revamped my portfolio as it was looking dreary and completely uninspiring, I wanted to present my work in a way that was both easy to navigate, easy to maintain and most importantly looked smart and un-cluttered. When I was brainstorming for ideas, I initially thought I would break up my portfolio into categories to make it both easier to navigate and more structured in presentation. After much consideration I completely scrapped categories and decided on the simpler approach of having large thumbnails with a brief sentence of text on hover.

So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text. You can see my portfolio here which is a good demo of what we’re creating of you can see the dedicated demonstration here

jquery-thumbs

The HTML

There are two DIV’s that make up the construction of each element, we first have out .item div which is the container for our image and caption. Directly inside the ‘item’ div we have the image with the ‘caption’ div directly below that with a link and paragraph tag inside. take a look at the code and image structure below to see the construction of the div elements.

structure

   <div class="item"><img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg" height="271" width="304" />
      <div class="caption"><a href="http://jenniferjohnston.tv">Jennifer Johnston</a>
        <p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
      </div>
    </div>

The CSS

.item {
	width:304px;
	height:271px;
	border:4px solid #333;
	margin:30px 12px 10px 5px;
	overflow:hidden;
	position:relative;
	float:left;
}
.item .caption {
	width:304px;
	height:71px;
	bottom:0;
	color:#fff;
	background:#000;
	font-weight:700;
	position:absolute;
	left:0;
	display:none;
	filter:alpha(opacity=82); 
	-moz-opacity:0.9;
	opacity: 0.9; 
}
.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:17px;
	letter-spacing:-1px;
	font-family:Arial, Helvetica, sans-serif;
	padding:5px;
	display:block;
}
.item .caption p {
	padding:5px;
	margin:0;
	color:#fff;
	line-height:15px;
	font-size:12px;
}
.item img {
	border:0;
	position:absolute;
}

The JavaScript

You can see that we’re setting two variables, ‘zoom’ and ‘move’. Notice that instead of declaring var again in front the variable ‘move’ i’ve omitted it. This is because if we’re setting multiple variables with jQuery you don’t need to add var each time, the values are almost chained.

The next steps are that we setup a .hover function that when triggered will animate the image width and height to give the impression that the image is zooming out, we’re also animating the caption to fade in and out on hover.

$(document).ready(function() {

        var zoom = 1.1
              move = -15;
	
	$('.item').hover(function() {
		
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
	
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
		$(this).find('div.caption').stop(false,true).fadeIn(300);
	},
	function() {

		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});	
		$(this).find('div.caption').stop(false,true).fadeOut(400);
	});

});

demodownload



More tutorials from Papermashup
Comments
25 discussions around jQuery image zoom effect
Newer Comments
  1. Giancarlo says:

    Congratulations. This is a wonderful effect library!

  2. Pingback: 45+ Incredible jQuery Plugins Making Images more Dynamic and Elegant | tripwire magazine

  3. rodman says:

    wow, cool looking zoom effect. i will sure use it on my site

  4. Josh says:

    I’m doing something a little different with jQuery zoom in my WordPress plugin for getting images from flickr. It really works out nice.

  5. Brecht says:

    Wow, I love it!
    Thanks for sharing another great jQuery tutorial

  6. digitalbart says:

    Subtle but Nice effect, like it!

  7. Very nice effect, did you try it with a definition list too? No use of div.item, div.caption and p! Just dl, dt and dd!

  8. Pingback: jQuery image zoom effect » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP)

  9. Davinder says:

    Thank you soo much!

  10. Brian Jones says:

    Nice little effect – thank you for sharing!

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.