Add zoom icon to images using CSS (and jQuery, of course)
I like to read articles on webdesignerwall.com. Not just because of its content, but also because of its great design. I like one simple effect this blog has and that is a zoom icon that is being shown when you hover an image. In this simple tutorial, I'll show you how to do it in two ways: CSS way and jQuery way.
Before we start, take a look at the live demo, or see it live on webdesignerwall.com.
View live demo
CSS way
This can be easily done with pure CSS. Take a look at the code below. Inside the each link there are an empty <span> element and image.
<div id="gallery1">
<h2>CSS solution</h2>
<a href="3029990904_d10cc4fd9d_o.jpg">
<span></span>
<img src="3029990904_6fc619349d_m.jpg" alt="" />
</a>
<a href="3036302292_d37001ed77_o.jpg">
<span></span>
<img src="3036302292_61f44a917c_m.jpg" alt="" />
</a>
</div>
So, the key is to have absolutely positioned <span> inside the relatively positioned link. Span's have a background image that is our zoom icon, actually. Span's width and height have to be the same as icon's size. You can set the location of zoom icon by setting its top/bottom/left/right position.
#gallery1 {width:100%; overflow:hidden;}
#gallery1 a {position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(zoom.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery1 img { border: solid 1px #999; padding:5px;}
Spans will be hidden initially, but if we add just one more line of code, they will be shown on each hover.
#gallery1 a:hover span { display:block;}
jQuery way
Things cam be even simpler if we use jQuery. We can, for example, get rid of <span> elements in the structure and add them dynamically. Or we can add an animation effects. So in this case, html code will be somewhat simpler:
<div id="gallery2">
<h2>jQuery solution</h2>
<a href="3029990904_d10cc4fd9d_o.jpg">
<img src="3029990904_6fc619349d_m.jpg" alt="" />
</a>
<a href="3036302292_d37001ed77_o.jpg">
<img src="3036302292_61f44a917c_m.jpg" alt="" />
</a>
</div>
There are no <span> elements inside links. We can add hem dynamically instead:
$("#gallery2 a").append("<span></span>");
Pretty much easy. Now let's add some functionality. Instead of handling hover with CSS we'll do it through jQuery and add fade-in and fade-out effects along the way.
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
Zoom icon will slowly fade in on hover a link, and quickly fade out when leave it. So the complete jQuery code will look like this:
$(document).ready(function(){
$("#gallery2 a").append("<span></span>");
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});
Do you use some other way to do this or have something similar?
More articles in
Blog archive or
elsewhere