Liquid Hover Image (Divi)

A WebGL displacement-map transition between two (or more) images, for Divi 5: both images are pushed along an angle by the brightness of a map while they cross-fade. The maps are generated in the browser. Without WebGL, or with reduced motion, the images simply cross-fade. There are 16 on this page — only 8 WebGL contexts are live at once, near the viewport. Hover the images.

1. On hover, with captions

Swirl (default), intensity 0.35, 1.2 s, smooth · title slides in from the left over a shade · Water ripples, 0.6 intensity, dramatic easing · title rolls up to an amber copy · Paint, 45° / −90°, 1.1 × zoom on hover · underline draws in, caption top-left.

2. Eight more maps

Noise, Wave, Stripe, Zigzag, Parallel, Mosaic, Honeycomb and Dots — each 1:1, intensity 0.5, with its name fading up on hover over a shade.

3. Autoplay slideshow

Autoplay through five images (the two images plus three More Images), 2.5 s each, pausing on hover · Radial map, 1.6 s · 21:9 · letters drop in, caption in the middle · Title in white 54 px (26 px on phones).

4. Click, in view and a custom map

Left: On click / tap — each click moves to the next of four images · Honeycomb · glitch title with an amber and cyan flicker. Middle: Once, when scrolled into view · Wipe (gradient) · caption below the image. Right: Custom map image — the Divi Ninja print used as a texture · Concrete-like cracks · 0.8 intensity · shade and a middle-left caption offset 20 px.

5. Finished design

A dark product card: 3:4, focus top, a 28 px radius with a white 6 px frame and a deep shadow, slightly desaturated (Divi filters), 1.06 zoom, Mosaic at 0.4, a dark translucent caption box bottom-left (18 px radius, offset 16 px) with a pink title that turns amber on hover. Links to #shop.

Without WebGL

The real images are always in the page: search engines and screen readers see them, and a browser without WebGL (or with reduced motion) cross-fades between them instead.