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.