hover css zoom in image without overflow code example

Example 1: how to use image zoom effect in css

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

Example 2: how to use image zoom effect in css

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}