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
good work...
- 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
- by jaydeep majithiya on 7/18/2014
very helpful....
i really appreciate........thanks so much.
- by daxa on 8/7/2014
Thanks dear its working 
- by nirav jethava on 9/1/2014
Works Great
Tried it out and works great. Used a div tag rather than a list and there were even less classes. Thanks!
- by purple mountain on 1/17/2015
EXACTLY what I've been looking for!
I've been looking all over for this kind of hover-zoom!  I will try it on a jewelry store website with many images, where I want to provide enlargements without the viewer having to click all over the place. Hoping it works for me!
- by KathyAZ on 4/12/2015
image zoom effect
tell the code of effect f zoom in images
- by daulat on 9/10/2015
With 'touch' devices being more common worldwide, it would make sense to include code for clicking and tapping to zoom instead of hovering with a mouse.
- by John on 6/28/2016
Thanks For Sharing
Glad to see your post, and hope things improve so we get some more posts to read!
[url=]Female Escorts in Gurgaon[/url]
- by Devayani Kaur on 1/19/2019
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :