How to make a smooth zoom of the image on hover — effect on pure CSS

To create a smooth zoom effect on an image using pure CSS, you can utilize CSS transitions and transforms. Here’s an example:

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Image" class="zoom-image">
</div>

CSS:

.image-container {
  width: 200px; /* Adjust the width and height to fit your needs */
  height: 200px;
  overflow: hidden;
}

.zoom-image {
  transition: transform 0.3s ease; /* Adjust the transition duration and timing function as desired */
}

.image-container:hover .zoom-image {
  transform: scale(1.2); /* Adjust the scale factor to control the zoom level */
}

In this example, we wrap the image in a container element (image-container) with a fixed width and height. We set overflow: hidden to ensure the image doesn’t overflow the container.

The zoom-image class is applied to the image itself. We set a transition property on this class to specify the CSS property to transition (transform) and the duration and timing function of the transition.

When hovering over the image-container, the .zoom-image within it will be targeted using the :hover pseudo-class. The transform: scale(1.2) rule scales the image by 1.2 times its original size, creating a zoom effect. Adjust the scale factor to achieve the desired level of zoom.

Feel free to customize the CSS properties to fit your specific requirements, such as dimensions, transition duration, and the scale factor for the zoom effect.