Category : Css | Author : Chtiwi Malek | First posted : 11/21/2012 | Updated : 8/14/2014
Tags : css, css3, image, enlarge, zoom, smooth, effects, popup, source, transitions, pictures, hover, plugin
Pure CSS Images Zoom Effect

Pure CSS Images Zoom Effect

Lately I decided to switch my jquery image zoom plugin on one of my sites to an equivalent pure css solution, and the results were amazing: I've got the same effect but with more responsive design, no javascript, and much less code.

In this tutorial I will share the css and html code I wrote to add the smooth hover zoom effect to images.

Here's the demo : just move the mouse over the images.

We will mainly take advantage of the CSS Transitions feature to get the images to smoothly zoom in and out.

The following css code will define the image's normal state and hovered state, in the normal state we will choose which properties to apply the transition to, and in the hovered state the final values, also the image will have a high z-index when hovered to stand over other images.

.zit
{
    position:relative;
    width:100px;
    height:80px;
    left:0px;
    top:0px;
    border:1px solid black;
    /* Apply a CSS3 Transition to width, height, top and left properties */
    transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -o-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
    -moz-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}

.zit:hover
{
    width:150px;
    height:120px;
    left:-25px;
    top:-25px;
    z-index:9999;
}

.ZoomIt ul
{
clear:both;
}
.ZoomIt li
{
width:102px;
height:82px;
margin:4px;
float: left;
overflow:visible;
display: block;
}
Notice that each time I duplicate the "transition" line and add the -webkit- and -moz- -o- prefixes, that’s needed for other browsers (Mozilla, chrome, opera, …)

In the html markup, any image (or other element) with the class name "zit" will have the zoom effect :
<div class="ZoomIt">
   <ul>
      <li><a href="http://www.slapix.com/lol/i_gots_my_eye_on_you.aspx" title="I gots my eye on you"><img class="zit" src="http://www.slapix.com/img/i2m/i_gots_my_eye_on_you.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/take_my_advice.aspx" title="Paul McCartney"><img class="zit" src="http://www.slapix.com/img/i2m/take_my_advice.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/the_greatest_gift_of_all_is.aspx" title="George Harrison"><img class="zit" src="http://www.slapix.com/img/i2m/the_greatest_gift_of_all_is.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/i_ll_never_be_perfect.aspx" title="I'll never be perfect"><img class="zit" src="http://www.slapix.com/img/i2m/i_ll_never_be_perfect.jpg" /></a></li>
   </ul>
   <ul>
      <li><a href="http://www.slapix.com/lol/where_s_my_hug_today.aspx" title="Where's my hug today"><img class="zit" src="http://www.slapix.com/img/i2m/where_s_my_hug_today.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/i_m_nice_until_you_screw_it_up.aspx" title="I'm a nice person"><img class="zit" src="http://www.slapix.com/img/i2m/i_m_nice_until_you_screw_it_up.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/karma_has_no_deadline.aspx" title="Karma has no deadline"><img class="zit" src="http://www.slapix.com/img/i2m/karma_has_no_deadline.jpg" /></a></li>
      <li><a href="http://www.slapix.com/lol/you_are_beautiful.aspx" title="You are beautiful"><img class="zit" src="http://www.slapix.com/img/i2m/you_are_beautiful.jpg" /></a></li>
   </ul>
</div>
This code will work on recent versions of major browsers like IE10, firefox, chrome, opera ...

I'd love to hear your thoughts and ideas, so feel free to comment.
And if you like this tutorial, please Share it, Thanks.
About the author :
Malek Chtiwi is the man behind Codicode.com
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Clipping path
A very smart approach to explain the things, I like your step by step tutorial
- by Shamim on 12/22/2012
help
hi, My name is Abdul Kadir, im designing simple web page for someone and i need help on Html Cde for slideshow..... Can you help me please!!!!!!!!!!! or tutor me sometimes if you have time..... Thanks.
- by Abdul on 1/24/2013
LessCss
good work...
http://lesscsstutorial.com
- by lesscss on 3/19/2013
i want file
i want file
- by kalai on 4/24/2013
Quick Question
First, thank you for providing it.  I appreciate your contributions.  When I implement the code, the zoom works perfect, however, when I hover, the hovered picture displaces the other ones?
- by Jonathan on 4/25/2013
Jonathan's problem
I have the same problem as Jonathan, could you help us?
- by Andreas on 5/2/2013
Very helpful
Thanks, smart using the transitions + zindex
- by Jawid on 6/19/2013
Zoom not working
The zooming effect is not working. Do you have other codes that have the same result but different way of coding it? love to put it on my sites.
- by starfall zone on 7/31/2013
Very Helpful
thanks
- by jaydeep majithiya on 7/18/2014
very helpful....
i really appreciate........thanks so much.
- by daxa on 8/7/2014
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :


» Member access
 
» Latest
» Random/Popular
© Codicode | Content and source © 2013