Image Zoom Container

<div class="zoom-container">
  <div class="zoom-bg"></div>
  <div class="zoom-overlay">
    <span style="font-weight:600;font-size:13px;color:#fff">View Project</span>
  </div>
</div>

.zoom-container {
  position: relative;
  width: 200px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.zoom-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.zoom-container:hover .zoom-bg {
  transform: scale(1.1);
}
.zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.zoom-container:hover .zoom-overlay { opacity: 1; }