Show a transformation with a draggable divider: labels on each side of the image, a caption underneath and a handle that works with mouse, touch and keyboard.
Runs entirely in your browser. Nothing is uploaded to any server.
Visitors drag to see exactly what changed between two images.
Labels and a caption explain what each side shows.
A real range input works with keyboard and screen readers.
The after image sits in normal flow and sets the height. The before image is stacked on top and trimmed with clip-path: inset(), driven by a single CSS custom property called --pos. Moving the divider only changes that property, so it is smooth even on slow phones.
An invisible range input covers the whole image. It gives you mouse dragging, touch dragging and arrow-key control for free, and screen readers announce it as a slider. touch-action: pan-y still lets people scroll the page vertically on phones.
Export both images at the same dimensions so they line up exactly.
figure and figcaption tie the caption to the comparison.
Keyboard users see an outline on the handle when it has focus.
The after image sets the frame and the before image is stretched to cover it, so different aspect ratios would crop or misalign the before image.
Yes. Tab to the image and use the arrow keys, Home or End, because the control is a native range input.
Yes. Drag anywhere on the image horizontally; vertical swipes still scroll the page.
Yes. The script sets up every element with the class ba-frame.
This generator makes a side-by-side comparison. For a top and bottom split, change the clip-path inset to the top and bottom values and move the handle with top instead of left.
More free tools from My Panda Toolbox.