Hoverimagezoomoverlay

Image Zoom with Overlay

Image zooms in slightly while a dark overlay fades in on hover. Standard pattern for gallery grids and portfolio thumbnails.

.img-zoom {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.img-zoom img {
  transition: transform 0.4s;
  display: block;
  width: 100%;
}
.img-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}
.img-zoom:hover img { transform: scale(1.1); }
.img-zoom:hover::after { background: rgba(0,0,0,0.3); }

More Hover effects