Snippet / Theme Options > Custom CSS or the module CSS class field

Image Zoom on Hover

A CSS-only hover recipe for portfolio cards, product shots, and team photos that scales the image without changing the surrounding layout.

Use this when an image should feel interactive, but the card itself needs to keep the same size. Add dfy-image-zoom to the Image module, Blurb module, Woo product card wrapper, or any parent that contains one image.

.dfy-image-zoom {
  overflow: hidden;
}

.dfy-image-zoom img {
  display: block;
  width: 100%;
  transform: scale(1);
  transform-origin: center;
  transition: transform 260ms ease;
}

.dfy-image-zoom:hover img,
.dfy-image-zoom:focus-within img {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .dfy-image-zoom img {
    transition: none;
  }
}

Notes

• Put radius, border, and shadow on the same wrapper as dfy-image-zoom, not only on the image.
• Keep this for decorative or exploratory images. Avoid zooming images that contain important small text.
• Retest in Divi 5 if the target module changes its image wrapper markup.

Sources

• https://www.cobalt.graphics/divi-css-snippets/