Here it is. Enjoy.
Subscribe to the Notebook RSS FeedArticle Options
Archives by Category
- Design (1)
- Freebies (1)
- OS X Workflow (1)
- Personal (2)
- Productivity (1)
- Thoughts (1)
- Web Development (3)
Archives by Year
- Published in: Web Development
- with 40 comments
Recently I’ve been prototyping some interactive thumbnail effects for various projects. I’d like to share one of the effects with you and how I built it. It’s a nice looking effect that I’m calling “hover zoom” because it’s pretty self explanatory. I’ve seen similar effects to this one on a few sites here and there, and they were always built in Flash. I wanted a CSS and Javascript solution so I whipped up the Hover Zoom effect.
Introduction
The hover zoom effect basically reverse zooms an image while fading in a label on top of it when the mouse hovers over it. It makes for a pretty slick effect which could be used on thumbnails. As always, you can check out a demo or grab the source right here if you don’t want to read the entire tutorial.
The Approach
It’s no surprise that I am a visual learner, so I thought the easiest way to illustrate the approach I’m taking for this effect is to mock up a little diagram.
We will build a div (the viewport) which will be slightly smaller than the size of the image or thumbnail. We’ll hide any overflow with the css property overflow: hidden;. The image will be the bottom layer, then on top of that we’ll have the label. We’ll default the label to be hidden with the CSS property of display: none;. Then we’ll use jQuery to build the interactions of scaling (zooming) the image down and fading in the overlay on top. Simple.
The HTML
The HTML is very simple for each thumbnail. We have the viewport which again is slightly smaller than the image. This allows the image to be scaled down to the viewport size and create a reverse “zoom” effect. Our label sits on top of the image and that’s about all there is to it!
<div class="viewport">
<a href="http://www.flickr.com/photos/matt_bango/3479048548/">
<span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="http://farm4.static.flickr.com/3641/3479048548_e58742bd46.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
The CSS
The CSS is also very straight forward, you won’t find any surprises. You’ll notice that the image is positioned with negative top and left values. Let me explain the reasoning for this. When you scale the image, it scales from the bottom right corner. If we were to leave the image’s origin sit at 0,0; then when we scale the image it doesn’t have a “zoom” feel to it since only two sides are moving. To fake this, we push the origin of the image up and to the left, out of the view of the viewport. Now when we scale, we need to move the origin of the image to animate to 0,0. This is what gives us the “zoom” effect.
/* --- Container configuration ---------------------------------------------------------- */
.viewport {
border: 3px solid #eee;
float: left;
height: 299px;
margin: 0 9px 9px 0;
overflow: hidden;
position: relative;
width: 450px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
display: block;
position: relative;
}
.viewport a img {
height: 332px;
left: -20px;
position: relative;
top: -20px;
width: 500px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
display: none;
font-size: 3.0em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport a span em {
display: block;
font-size: 0.45em;
font-weight: normal;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
background-color: rgba(15, 15, 15, 0.6);
color: #fff;
text-shadow: #000 0px 0px 20px;
}
.dark-background em {
color: #ccc;
}
/**
* You could create multiple hover background classes for different looks depending on the
* image type. Use your imagination!
*/
It is also worth noting that rgba() doesn’t work in IE (surprised?). There is a workaround for this that works very well.
The Javascript (jQuery)
The Javascript for this effect couldn’t get simpler. All we need to do is add “mouseenter” and “mouseleave” events to the viewport. Once the mouse enters the viewport, animate the background image to scale down to the viewport size and fade in the label on top of it. Simple.
$(document).ready(function() {
$('.viewport').mouseenter(function(e) {
$(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100);
$(this).children('a').children('span').fadeIn(200);
}).mouseleave(function(e) {
$(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100);
$(this).children('a').children('span').fadeOut(200);
});
});
Summary
So there you have it, a nice little effect that’s very easy to implement. Are there better ways to do this? Sure, there are probably quite a few improvements you could make, but as I stated early, this was just a prototype I put together. Hopefully you learned something from it and by all means expand and improve on it. If you see a better way to do something, share it in the comments!
40 people left comments
Mehedi Hasan on January 24, 2012 at 2:57 am wrote:
Thanks……………
For nice j query collection……….
jpeltor on December 27, 2011 at 2:25 pm wrote:
Great tutorial. This is a very interesting implementation of the jquery fadein function. Thanks a lot.
mlumaad on December 15, 2011 at 2:55 am wrote:
You should put stop() before animate() to prevent repeating animation in your overlay
google chrome on October 12, 2011 at 4:27 pm wrote:
@ie9 then dont use ie
Uerlen on October 6, 2011 at 11:59 am wrote:
Very good. Congratulations… :-D
Fiona on September 21, 2011 at 2:01 pm wrote:
THANKS. it really helps me a lot :D
crisp canvas prints on May 12, 2011 at 11:18 am wrote:
I really wonder, how I didn,t get this zoom effect before. It is so nice to work
ie9 on May 3, 2011 at 6:27 pm wrote:
no text and shadow effect on ie9
bobby on April 17, 2011 at 8:51 am wrote:
your script is amazing, thank you.
boilers on February 8, 2011 at 7:34 am wrote:
Lots of great articles here…very helpful for the designers..thanks for sharing..
art on January 14, 2011 at 11:30 am wrote:
This is a neat idea! Thanks for sharing.
You could simplify it though, instead of looking for children:
instead of
$(this).children(‘a’).children(‘img’).animate({ height: ’299′, left: ’0′, top: ’0′, width: ’450′}, 100);
this:
$(‘a img’, this).animate({ height: ’299′, left: ’0′, top: ’0′, width: ’450′}, 100);
same for span. just a thought.
Robert Fonseca on December 21, 2010 at 4:39 pm wrote:
Hi!…
Have anyone problems with this effect on firefox?…
I’ve tried to prove this one on a website in a localhost and the img just dissappear!…
Any clue?
Grettings!
bobthebob on December 2, 2010 at 5:42 am wrote:
K.I.S.S indeed. really nice and simple !
And in case one would wonder, it works well with jquery 1.4.4
kochi flats on November 9, 2010 at 5:50 am wrote:
Really nice one. Thank you.
Niraj Thapa on September 21, 2010 at 12:01 am wrote:
Thank for this Zoomer effect jquery and really nice and good. Thank for this. But one problem is that it doesn’t work in ie8.
David on September 2, 2010 at 12:31 am wrote:
hey,
AWESOME script. I love it.
Is there a way to make it so your image doesn’t have to be a link though? When I tried taking out the a href code from the HTML it stopped working.
thanks again :-)
david
Webbdesign on August 23, 2010 at 3:58 am wrote:
That is a great effect, it not only looks nice but is also good for usability. You really get the point, this item is clickable. Great work!
mahdi on August 20, 2010 at 10:23 am wrote:
is there any demo ?
Anthony on August 1, 2010 at 7:35 pm wrote:
Lovely effect. I couldn’t find any license details – are we able to use this in commercial projects?
thanks
Anthony
Istvan on July 30, 2010 at 5:48 am wrote:
really nice effect,
but can I put sound to play when I hover the image?
can you show me an example.
thanks.
Jason on July 13, 2010 at 11:20 pm wrote:
Good Work!
Is is possible to include this effect with light box2?
Dimcho Tsanov on February 16, 2010 at 2:50 am wrote:
Very good pluggin – it keeps the KISS philosophy-
K – keep
I – it
S – simple and
S – smart :) Thanks for it !
Nath on November 26, 2009 at 12:47 pm wrote:
Very good, although I am having a problem getting this to work in firefox?
I used your tut as a starting point but not moved to far away from the original code. Any gecko browser seems to fail. Any help?
Blogger Plug n Play on November 12, 2009 at 9:57 am wrote:
This is Good One :)
Get Blogger Tutorials for jQuery widgets on my site :)
dlv on July 25, 2009 at 2:10 am wrote:
hi, me again :)
Is easy to do the inverse effect Matt ? Zomming in with mouse hover…
thanks in advance
monkeys on July 25, 2009 at 1:14 am wrote:
you could rewrite each to save the children in a variable:
var kids = $(this).children(‘a’);
to prevent the extra dom searching each time.
or if you want to go even further, write a single chain, e.g.:
$(this)
.children(‘a’)
.children(‘img’)
.animate({ height: ’299′, left: ’0′, top: ’0′, width: ’450′}, 100)
.end()
.children(‘span’)
.fadeIn(200);
which is how jQuery is intended to be written.
dlv on July 24, 2009 at 5:34 pm wrote:
really really nice effect !
and yes, it’s remind me http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/
but who don’t want tabs too (like me) your jquery effect is perfect… thanks for share this kind of resources, one of this days i’m gonna use it
adeux
from argentina
Sean O on July 24, 2009 at 1:46 pm wrote:
Nice effect, Matt.
Reminds me of Remy’s Sharp’s re-creation of the BBC Radio 1 Zoom Tabs effect:
http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/
Liz Anderson on July 24, 2009 at 11:52 am wrote:
This is a pretty neat effect! Thanks for sharing how you built it. One thing I would like to point out is the “text-shadow” property only works in Safari, correct?
I love your posts, keep them coming!
15 Great Hot Thumbnail Photo Gallery Effects on July 26, 2011 at 9:42 am wrote:
[...] 4. Hover Zoom Effect with jQuery and CSS [...]
30+ jQuery Plugins and Scripts for Web Designers 2011 | Web Design Zo on March 24, 2011 at 12:15 pm wrote:
[...] Demo Download [...]
The Blog of Steve-O on February 27, 2011 at 4:39 pm wrote:
[...] Matt Bango – Hover Zoom Effect with jQuery and CSS Main jQuery [...]
Giographix Studios » 10 Favorite Design Resources used in 2010 on February 11, 2011 at 12:57 pm wrote:
[...] Hover Zoom Effect with JQuery and CSS [...]
Hover Zoom – galeria z lekkim zoomem w jQuery | Taipa.pl on February 11, 2011 at 1:05 am wrote:
[...] http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ Demo: http://mattbango.com/demos/hover-zoom/ Licencja: [...]
Ziggabyte >> jQuery Magazine » Blog Archive » Hover Zoom Effect with jQuery and CSS on January 20, 2011 at 11:54 pm wrote:
[...] Demo | Download | Home Page [...]
SITE www.grafischdesign.net - 9lives - Games Forum on January 15, 2011 at 2:40 pm wrote:
[...] Deze als ik my niet vergis; Hover Zoom Effect with jQuery and CSS – Notebook | MattBango.com [...]
Tara Jane Irvine » Blog Archive » Inspiration on September 14, 2010 at 4:32 pm wrote:
[...] the zoom out caption effect of this tutorial http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ [...]
Zoom em Imagens « Nuno Henrique / Blog on April 20, 2010 at 8:52 am wrote:
[...] Hover Zoom basicamente inverte o efeito de zoom enquanto aparece um texto enquanto se passa o mouse sobre sobre a imagem. http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ [...]
Free web resources – Net-Kit.com » Blog Archive » 15 Excellent thumbnail gallery effects on December 2, 2009 at 8:18 am wrote:
[...] 4. Hover Zoom Effect with jQuery and CSS [...]
Hover Zoom | MattBango.com | Squico on August 24, 2009 at 11:20 am wrote:
[...] In: JQuery plugins 24 Aug 2009 JQuery hover zoom affect on gallery Go to Source [...]
Share your thoughts