jQuery image zoom effect

jQuery image zoom effect

 

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.

Mimitah Bofando

African musician Mimitah Bofando. Branding, site design and development

Kate Mcintyre

TV presenter Kate Mcintyre. Branding, site design and development

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

});

Download: http://www.htmldrive.net/items/download/279

Be Sociable, Share!

Leave a comment