Block
Before/After
Compare two states of the same image with a divider between them. Show retouching, design iterations, or transformation work. Drag the handle, or use arrow keys.
GET THIS BLOCK - FREE
Media Block · Block 05 / 09
← All blocksBEFORE / AFTER / LIVE
After: Grid reveal
Salt & Pine
Before: Static
Salt & Pine
Recreated for the web · ships as a native WordPress block
What you can control
| Attribute | What it does | Default |
|---|---|---|
data-initial-position | Starting divider position as percentage | 50 |
data-min-position | Minimum allowed divider position | 10 |
data-max-position | Maximum allowed divider position | 90 |
Accessible: Before/After slider is fully keyboard-operable (arrow keys) and touch-friendly. Screen reader announces position updates.