Image Compare

Prove the difference with a before-and-after slider.

A before / after image slider — drag, click or hover to compare, with handle designs, labels, frames, a hint animation and full keyboard support.

Gutenberg block

Requirements

Open the page or post in the block editor.
Click + (Block Inserter) and search for Image Compare — it is in the Moduly category.
Insert it, then fill in its content on the canvas.
Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.

Setting	What you can set
Direction	horizontal or vertical
Starting position (%)	0–100
Move the divider by	drag, handle, click or hover
Return to the start when the mouse leaves	On / off
Keyboard step (%)	1–25
Hint animation	none, sweep, reveal or pulse
Screen-reader label	Text

Setting	What you can set
Frame	auto, height, 1/1, 16/9 or 4/5
Height (px)	120–1000
Image focus	center center, center top, center bottom, left center or right center
Before image look	none, grayscale, sepia, faded, blur, dark or invert
Tint the images on hover	On / off

Setting	What you can set
Design	circle, square, pill, arrows, line or knob
Inside the knob	arrows, grip, text or none
Word	Text
Line thickness (px)	1–20
Knob size (px)	16–140
Knob scale on hover	1–1.5

Setting	What you can set
Corner radius (px)	0–60

Styles tab: typography, spacing and shadow, from WordPress's own design tools.

Start with the Design choice — it changes the overall look the most; fine-tune the rest afterwards.
Visitors who ask their device for reduced motion get a calmer, still version automatically.

Pattern text is English only.
No Moduly loader change was needed.
A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.