Image hover Zoom n’ Rotate effect with Pure CSS

Simplest way to achieve zoom-in and rotate effect on image hover with plain CSS.

Image hover Zoom n’ Rotate effect with Pure CSS

Modern day web is full of animations. A simple animation for example, could be zooming-in images on hover event — within a specific viewport container. Here, viewport is not the screen, but a smaller container wrapping our image.

You might think of getting this done with jQuery firsthand, but wait! You can do it with pure CSS too without any JavaScript involvement. CSS3 is powerful enough to animate things in the browser.

I was working on a project in which the blog post thumbnails should zoom-in when hovered but within a container element.

Image states: Normal and on hover [demo 1] [demo 2]

Doing a hover zoom is quite a simple thing. For that, you don’t need anything else except CSS3 scale transform property. But here, the case is a bit advanced.

In more simpler words, the image should zoom on hover inside the container element and do not come or flow outside that div on zoom.

You might have also seen many modern blog designs making use of this effect. See the demo first to get a better overview.

So, the idea is to limit the container element with the CSS overflow property. And then zoom the image on hover by using the CSS3 transform property. Sounds pretty easy.

The Markup

The HTML is very simple. We have .img-container as the container wrapping our img.

<div class="img-container">
  <img src="image.jpg" alt="My image" />

You may iterate this piece of code as many times as you want in your project.


Observe the below CSS.

.img-container {
  overflow: hidden;

.img-container {
  display: block;
  overflow: hidden;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;

.img-container img:hover {
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  1. Setting the overflow: hidden; to the container and the image will avoid the image going outside the parent on zoom.
  2. A transition effect on the image is also required to make our zoom animation effect smooth. CSS3 transition property takes care of that thing.
  3. Now, setting a scale transform on image hover event will do the zoom part.

See the demo 1 See the demo 2

What more?

Further, you may play with the transform and transition properties to bring more attractive effects out of it. Check out this demo for a bit advanced effect with image rotation.

Hope you found this useful. Please comment, follow and subscribe for more tuts like these.