How To Hover Zoom on an Image With CSS Scale

This article demonstrates how to hover zoom an image with the CSS scale property. Whenever the user’s cursor hovers, the image is enlarged. Included in this example are usable code and a live editable demo.

This article was first seen on and republished from

Image Hover Zoom With CSS Scale
Image Hover Zoom With CSS Scale


Here we use CSS to create a DIV element container. First, within the container, we include an image from provides free-to-use images over an URL API. With this in mind, we set the src of the HTML img element to be the photo we chose from Unsplash.

<div class="menu-container">
    <img src="" alt="">


The CSS provided below gives the project style. By providing style we create a more vivid example.

To demonstrate, we use a CSS “img:hover” selector which is the focus of this article. When the user hovers over the image, the CSS IMG hover selector activates. During the activation, the selector scales the image using the CSS transform scale property. Additionally, a transition easing property is applied to smooth the enlargement of the image. Vice versa, when the cursor leaves the image, the image returns to its original size. This ultimately creates the image hover zoom effect with pure CSS.

Ease-in-out is not the only transition timing function effect that can be applied. There are steps, cubic-bezier, ease, and many more.

More on CSS timing functions from the Mozilla developer website.

html, body {
  height: 100%;
  overflow: hidden;
  background: #02E5D5;
  background: -webkit-linear-gradient(top left, #02E5D5, #5F4CE3);
  background: -moz-linear-gradient(top left, #02E5D5, #5F4CE3);
  background: linear-gradient(to bottom right, #02E5D5, #5F4CE3);

  width: 400px;
  transition: all 2s ease-in-out;
  display: block;
  box-shadow: 0 8px 16px rgb(0 0 0 / 76%);

  transform: scale(1.5);

.menu-container {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;

Link to an editable live demonstration on

Recommended Articles