Liquid Hover Image
Make images melt into each other for a striking effect.
Images that melt into each other through a WebGL displacement map on hover, click, autoplay or in view, with animated captions; a cross-fade without WebGL.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Liquid Hover Image — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
Images
| Setting | What you can set |
|---|---|
| First image | Number |
| Second image (shown on hover) | Number |
| More images (autoplay and click) | List |
| Description | Text |
| Image size | medium large, large or full |
| Link | Text |
| Open in a new tab | On / off |
Effect
| Setting | What you can set |
|---|---|
| Play | hover, click, auto or view |
| Seconds per image | 1–15 |
| Pause on hover | On / off |
| Displacement map | swirl, noise, paint, water, wave, stripe, zigzag, parallel, … (15 in all) |
| Map image (greyscale) | Number |
| Map scale | 0.25–4 |
| Intensity | 0–1.5 |
| Duration (s) | 0.2–4 |
| Angle in (degrees) | -180–180 |
| Own angle out | On / off |
| Angle out (degrees) | -360–360 |
| Easing | inout, out, expo or linear |
Frame
| Setting | What you can set |
|---|---|
| Width (px, 0 = full) | 0–1600 |
| Width on phones (px, 0 = same) | 0–800 |
| Alignment | center, left or right |
| Shape | 4/3, 1/1, 3/4, 2/3, 3/2, 16/9, 21/9 or 9/16 |
| Zoom | 1–1.5 |
| Opacity | 0.05–1 |
| Keep in view | center, top, bottom, left or right |
| Corner radius (px) | 0–60 |
Caption
| Setting | What you can set |
|---|---|
| Title | Text |
| Subtitle | Text |
| Title tag | h2, h3, h4, h5, div or span |
| Title animation | static, reveal, roll, letters, glitch, underline or fade |
| Position | bottom left, bottom center, bottom right, middle left, middle center, middle right, top left, top center, … (10 in all) |
| Reveal from | left, right, up or down |
| Shade behind the caption | On / off |
| Move across (px) | -200–200 |
| Move up / down (px) | -200–200 |
| Caption width (%, 0 = auto) | 0–100 |
| Title on hover | Text |
| Accent | Colour |
| Subtitle on hover | Text |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- Displacement maps are generated in the browser at first use; a custom map should be a greyscale image of similar proportions.
- The hover version without a link cannot be reached by keyboard (it is a decorative effect; the first image is still read).
- Pre-existing elementorFrontendConfig is not defined front-end error for logged-in users (Elementor).
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Also available for Elementor (Liquid Hover Image), Divi (Liquid Hover Image).
- Works well with: Advanced Slider, Animated Heading, Animated Icon.