SMOOTH Image Zoom on Hover Effects with CSS

About

A bunch of instant CSS recipes to achieve slick image hover zoom effects coupled with some rotation, scaling, blurring, and more.

This page is powered by Omnivore ‐ you can read more about how I use Omnivore here: Omnivore - Saving Articles for Citations in Obsidian.

Highlights

We need a container element which will be hovered and then the image inside it should animate accordingly, i.e. zoom-in or zoom-out as per the need.

Note that the image should zoom on hover inside the container element and do not come or flow outside of it when it gets zoomed.

So, the basic idea is to limit the container element with the CSS overflow property.

The zooming and animation parts will be handled with the CSS3 transform and transition properties respectively. ⤴️

How to create on-hover image zoom container

The CSS

Observe the below CSS.

/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

⤴️

#CSS