Zoom Image When User Hover

08/11/2024
Zoom Image When User Hover with CSS

You can create a zoom effect using the CSS cursor and transform properties. Set the same image URL in both the cursor property and the img tag.

img {
   cursor: url(../images/cursor.png), auto;
}

img:hover {
  transform: scale(1.1)
}

CSS Image Zoom on Hover Example

Hover the mouse over the image to zoom.

You can adjust the zoom level using the transform scale property.