Detail pages Free

Gallery image hover zoom

A smooth zoom-on-hover effect for gallery thumbnails on a listing detail page.

.zoom-frame {
  overflow: hidden;
  border-radius: 8px;
}
.zoom-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.zoom-frame:hover img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .zoom-frame img { transition: none; }
  .zoom-frame:hover img { transform: none; }
}

Wrap each gallery thumbnail in a .zoom-frame element that clips overflow, so the image scales gently inside a fixed frame on hover instead of pushing the layout.

Notes

The frame must keep overflow: hidden or the zoom will spill over neighbouring images.
.zoom-frame is a placeholder class for your thumbnail wrapper, not a Voxel core selector.
The effect is disabled for reduced-motion users automatically.