Before / After Slider
X-ray · layers
Parameters
How this effect works
Two images sit stacked in the exact same spot — the after underneath, the before on top. The whole trick is one CSS property on the top image: clip-path: inset(0 <right>% 0 0), which hides everything to the right of the divider. Move a single number — the divider's position — and the clip follows, so the before is revealed on the left and the after shows through on the right. There's no cross-fade and no canvas; it's the same picture cut in two by a line you can drag.
The handle is just that line plus a grip, positioned at the same percentage; dragging it (or the slider) sets the number. Labels are the two tags pinned to opposite corners. And when you leave it alone, the auto-sweep nudges the divider back and forth with a slow sine around wherever you parked it, so a still page still shows off both sides. Here the "photos" are a warm day and a cool night of the same scene.