<div class="zoom">
  <p>Move your mouse over the image</p>
</div>

<div class="info">
<p>Article about this Pen: 
  <p><a href="https://ruslanyusupov.com/sandbox/zoom-scale-an-element-on-hover-with-css" target="_blank">https://ruslanyusupov.com/sandbox/zoom-scale-an-element-on-hover-with-css</a></p>
      <p>Photo from <a href="https://www.pexels.com" target="_blank">www.pexels.com</a></p>
</div>
.zoom {
  transition: 0.5s ease; /* Animation */
  width: 300px;
  height: 250px;
  margin: 0 auto;
  background-image: url("https://github.com/RuslYusupov/CodePen/blob/main/images/desert.jpg?raw=true");
  background-size: cover;
  box-shadow: 5px 5px 15px #141c3a;
  border-radius: 12px;
}

.zoom:hover {
  transform: scale(1.5); /* 150% zoom */
  box-shadow: 5px 5px 15px #141c3a;
}

p {
  margin-left: 5px;
  margin-top: 30px;
  font-size: 1.6rem;
  color: white;
}

.zoom:hover p {
  display: none;
}

.info {
  margin-top: 50px;
}

.info p {
  color: black;
  font-size: 1rem;
}

a {
  color: gold;
  text-decoration: none;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.