jQuery image zoom effect

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

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.

   <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);
	});

});