Dynamic Image Zoom with CSS: Hover Effects That Scale

In 2015, I answered a question on Stack Overflow in Portuguese about zooming an image on hover. It scored 5 upvotes. The technique was pure CSS and worked everywhere.

The 2015 Approach

.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.3s ease;
}

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

Clean and effective. overflow: hidden clips the scaled image to the container bounds. transition animates the scale smoothly. Still a valid pattern in 2026.

The 2026 Additions

aspect-ratio Prevents Layout Shift

In 2015, containers needed explicit height to prevent layout shift. Now:

.image-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

aspect-ratio maintains the container proportions without hardcoding dimensions. object-fit: cover ensures the image fills the container without distortion.

@starting-style for Entry Animations

New in 2024, @starting-style animates elements when they first appear in the DOM — useful for image galleries:

img {
  transition:
    opacity 0.3s,
    transform 0.3s;
}

@starting-style {
  img {
    opacity: 0;
    transform: scale(0.95);
  }
}

Images fade in and scale up when they first render, creating the effect of appearing organically.

contain: layout for Performance

For grids with many images, contain tells the browser the element is isolated:

.image-container {
  contain: layout;
  overflow: hidden;
}

This hint allows the browser to skip layout recalculations outside the container when something inside changes — useful for smooth hover effects on large image grids.

Key Takeaway

The original transform: scale() hover pattern from 2015 is still correct and still used. What changed is the supporting cast: aspect-ratio for responsive containers, object-fit for image cropping, @starting-style for entry animations, and contain for performance. The pattern got richer, not replaced.