Before / after
Two-image comparison with a draggable handle.
Updated 2026-05-09
Side-by-side comparison reveal — drag the handle to see "before" vs. "after".
Settings
| Setting | Notes |
|---|---|
| Before image | Left/initial state |
| After image | Right/final state |
| Initial position | 0–100% (where the divider starts) |
| Heading + Subheading | Above the comparison |
| Caption labels | Optional "Before" / "After" labels overlaid on each side |
Behavior
- Drag the handle (mouse / touch) to reveal more of either image
- Keyboard accessible: focus the handle and use arrow keys
- Tap-to-position: tap anywhere on the image to jump the divider
Tips
- Both images should be the same dimensions for a clean reveal — different aspect ratios cause edge clipping.
- Skincare and home-decor brands use this most. Position the differences (e.g., a stain) where the divider naturally rests so the difference is obvious.
- Set Initial position to 30% if your "after" is the more impressive frame — invites users to drag right to discover.
Need a hand? Contact support.