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);
});
});
Nice little effect – thank you for sharing!
Thank you soo much!
[...] Image jQuery – Cet effet réalisé avec quelques lignes de jQuery (et un soupçon de CSS) applique un léger effet de zoom sur une image tout en affichant sa description au survol de la souris sur le conteneur. Voir la démonstration. Posted in Helper CSS | Tagged Description, Image, jQuery, Zoom Cancel Reply [...]
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!
@Webstandard-Team i haven’t tried it with a definition list but i can’t see any reason why it wouldn’t work.
Subtle but Nice effect, like it!
Wow, I love it!
Thanks for sharing another great jQuery tutorial
I’m doing something a little different with jQuery zoom in my WordPress plugin for getting images from flickr. It really works out nice.
wow, cool looking zoom effect. i will sure use it on my site
@rodman glad to hear you found it useful, thanks
[...] jQuery image zoom effect [...]
Congratulations. This is a wonderful effect library!
[...] jQuery image zoom effect [...]
[...] jQuery image zoom effect – De apelo visual, este plugin é útil quando bem [...]
This is def one of the best zoom effects Ive seen – its very smooth , and I like the fact of the thumbs being larger than the standard 150×150- however the zoom effect is simply awesome . Great work !
I think semantically it will be better if a set of DL/DT might be used. Any other thoughts expect DIVs?
@PSDgator, I guess your right. a definition list would certainly make sense.
This article is misnamed, as there’s no real “zoom” effect. A better title would be, “Nifty jQuery Caption Zoom”.
However, let me submit a pure-CSS Image-caption zoom, which IS both an image zoom and a caption zoom (with the added benefit of not requiring or relying on jQuery or JavaScript – i.e., everyone gets to see it.
Developed by me five years ago. Just as relevant today as it was then.
Cheers,
-stk
Leave a comment...
Connect
Latest Poll
Recent Posts
Design & Dev Jobs
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.