Drag the handle across to wipe between BEFORE and AFTER. Used for product retouches, photo edits, before/after redesigns.
Two images stacked. A vertical handle the user drags reveals the AFTER image over the BEFORE — like wiping a curtain across. Used in photo-editing tools (Lightroom mobile), product retouching pages, "before / after" surgery sites, redesign case studies, and color-graded photography portfolios. Tiny interaction, surprisingly powerful — your eye does the comparison automatically.
Container holds two absolutely-positioned full-bleed images (BEFORE behind, AFTER on top). The AFTER element gets a clip-path: inset(0 calc(100% - var(--p)) 0 0) that hides everything to the right of the divider position (stored in a CSS custom property). A vertical white line and circular handle sit at the same position. Listen for pointerdown on the handle (or anywhere on the container), then pointermove updates --p based on cursor X within the bounding box. Add keyboard arrow controls for accessibility.
Drag the handle left/right (or click anywhere) to wipe between before and after.
Build a before/after image-compare slider. Container: aspect-ratio:16/10, max-width:820px, position:relative, overflow:hidden, border-radius:14px, cursor:ew-resize. Inside: two absolutely-positioned full-bleed elements — .before (the unedited version) BELOW and .after (the edited version) ON TOP. The .after element gets clip-path:inset(0 calc(100% - var(--p, 50%)) 0 0) so its right side is hidden based on the current divider position (a CSS custom property). Also add a 2px white vertical divider line and a circular white drag handle (44px, 3px white border, big shadow), both positioned at left:var(--p). Tag pills floating in opposite corners labeling Before / After. Pointer behavior: listen for pointerdown on the container/handle. On pointerdown, capture the pointer; on pointermove, compute the cursor's x as a percentage of the container width and set --p accordingly (clamped 0-100). Update a "Showing X% after" counter. Keyboard: ArrowLeft/Right on focused handle nudges --p by 2% each press. Reset / Show Before / Show After buttons set --p to 50/0/100 with a smooth transition. Use distinct gradient backgrounds for the two images so the diff is visible without real photos.