Background zoom on hover

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