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.

    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;


.ZoomIt ul
.ZoomIt li
float: left;
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">
      <li><a href="" title="I gots my eye on you"><img class="zit" src="" /></a></li>
      <li><a href="" title="Paul McCartney"><img class="zit" src="" /></a></li>
      <li><a href="" title="George Harrison"><img class="zit" src="" /></a></li>
      <li><a href="" title="I'll never be perfect"><img class="zit" src="" /></a></li>
      <li><a href="" title="Where's my hug today"><img class="zit" src="" /></a></li>
      <li><a href="" title="I'm a nice person"><img class="zit" src="" /></a></li>
      <li><a href="" title="Karma has no deadline"><img class="zit" src="" /></a></li>
      <li><a href="" title="You are beautiful"><img class="zit" src="" /></a></li>
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
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
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
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :