← All Examples

Image Zoom on Hover

Smooth image zoom on hover using CSS transform and overflow:hidden.

Published May 19, 2026

Demo

Hover to zoom
Hover to zoom

HTML

<div class="zoom-wrap">
  <img src="image.jpg" alt="Hover to zoom">
</div>

CSS

.zoom-wrap {
  width: 200px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
}

.zoom-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.zoom-wrap:hover img {
  transform: scale(1.15);
}

How it works

overflow:hidden on the container clips the image when it scales beyond its bounds. The <img> itself gets transform:scale() on :hover with a transition. Because scale() grows from the center, the effect is a smooth zoom-in without shifting the image position. The container dimensions stay fixed throughout.