Background zoom on hover

April 11, 2020

How to zoom a background image but not overflow on the current size.

This is the html, we need an inner div that has the image and an oute div that wont let it override.

<div class="zoom">
  <div class="image" style="background: url(bg.png)">
  </div>
</div>

The css.

.zoom {
  overflow: hidden;
}

.image {
  transition: transform .3s ease;
}
.zoom:hover .image {
  transform: scale(1.2);
}