Background zoom on hover

Posted by Vasilis on April 19, 2019

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);
}