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 csstutorial.io

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

HTML

Here we use CSS to create a DIV element container. First, within the container, we include an image from unsplash.com. Unsplash.com 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">
  <div>
    <img src="https://images.unsplash.com/photo-1550007345-dcdff81aa558?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
  </div>
</div>

CSS

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);
}

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

img:hover{
  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 codepen.io

Recommended Articles