Image Zoom on Hover with CSS Transition and Overflow

Image Zoom on Hover

The image zoom effect smoothly scales an image larger when the user hovers over it, while a container with overflow: hidden clips the enlarged image so it stays within its boundaries.

CSS Code

.image-container {
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

.image-container:hover img {
  transform: scale(1.1);
}

How It Works

1. The container has overflow: hidden, which clips any content that extends beyond its bounds
2. The image fills the container at scale(1)
3. On hover, the image scales up to scale(1.1) — 10% larger
4. The container clips the overflow, so the zoom effect stays contained

Choosing the Scale Value

• scale(1.05) — subtle zoom, professional feel
• scale(1.1) — noticeable zoom, most common
• scale(1.15) — pronounced zoom, attention-grabbing
• scale(1.2+) — dramatic zoom, use sparingly

Adding an Overlay

Combine the zoom with a color overlay for a gallery-style effect:

.image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.image-container:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

Performance

The transform: scale() approach is GPU-accelerated because it operates on the composite layer. The browser scales the rasterized layer without re-rendering the image. This makes it much more efficient than animating width and height.