About the Before and After Slider
Zyff's before and after slider puts two photographs in the same frame and reveals one through a divider the visitor drags across it — the standard way to show a renovation, a repair, a retouch, a clean, a haircut or a weight change without making anyone open two images and flick between them. Split the frame left-to-right or top-to-bottom, choose whether the divider is dragged, follows the cursor, cross-fades on a tap, or simply sits where you put it. The handle is keyboard-operable and the pair carries one piece of alternative text, so the comparison still means something to a visitor using a screen reader. The output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike.
How to add a before and after slider to your website
Paste two image URLs
The before and the after shot, both on https. Use the same size and framing for both — the reveal crops rather than resizes, so mismatched shots will not line up at the seam.
Choose how it is revealed
A handle the visitor drags, a divider that follows the cursor, a tap that cross-fades between the two, or a fixed split that never moves.
Write the labels and the alt text
Name the two states, and describe the pair in one sentence so the comparison is readable to anyone not looking at it.
Copy the embed code
Paste the container div and script tag where the comparison should appear, or download the standalone HTML file.
What the Before and After Slider does
Horizontal or vertical
Split left-to-right for a room or a face, top-to-bottom for a landscape, a roof or anything wider than it is tall.
Four ways to reveal
Drag a handle, follow the cursor, tap to cross-fade, or fix the divider in place and let the picture do the work.
Crops, never squashes
Both photos are painted at full size and the top one is clipped. The obvious alternative resizes the top image as the divider moves, so a straight line in the photo bends across the seam. This one keeps it straight.
Works with a keyboard
Focus the handle and the arrow keys move the divider, Shift for bigger steps, Home and End to jump to either edge. It reports its position as a real slider, not a decorative div.
Touch and mouse alike
Pointer capture keeps tracking a fast drag that leaves the frame, and the cursor-following mode falls back to dragging on touch, where hovering does not exist.
Loads when it is needed
Two full-size photographs are the one thing worth deferring, so the widget waits until the visitor is near it before fetching anything.
At a glance
| Images | Two, both https URLs, loaded from wherever you host them |
|---|---|
| Interactions | 4: drag handle, follow cursor, tap to fade, fixed split |
| Direction | Horizontal or vertical |
| Starting position | 0-100% of the frame |
| Height | 180-720px, or the image's own proportions |
| Labels | In the corners, beside the handle, under the image, or none |
| Keyboard | Arrow keys, Shift for 10% steps, Home and End |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add a before and after slider to my website?
Paste the two image URLs into Zyff's builder, pick how the divider should move, then copy the generated embed code into your page where the comparison should appear. The whole flow is free with no signup.
Where do I host the images?
Wherever they already live — your CMS, your media library, an image host, a CDN. Both need to be reachable over https. Zyff does not store or re-serve them, so they load straight from your own hosting at whatever size you uploaded.
Do the two images have to be the same size?
The same size and the same framing, yes. The widget crops rather than resizes, so if the after shot is wider or taken from a step further back, the two halves will not meet correctly at the divider. Shooting from a tripod, or cropping both to the same box first, is what makes a comparison convincing.
Can I split the image top to bottom?
Yes. Vertical is the right choice for anything wider than it is tall — a roof, a lawn, a landscape, a long wall — where a left-to-right divider only ever shows you a sliver of the change.
Does it work on phones?
Yes. Dragging works with touch, and the cursor-following mode falls back to dragging there because hovering does not exist on a touchscreen. The tap-to-switch layout is often the clearest on a small screen, since there is no thin divider to find with a fingertip.
Is it accessible?
The handle is a real slider: it can be focused, moved with the arrow keys, and reports its position to assistive technology. The pair carries one piece of alternative text describing what changed, rather than two separate descriptions — hearing “before” and “after” read out tells a screen-reader user nothing at all.
Will it slow my page down?
The script is small and the widget waits until the visitor scrolls near it before loading, so nothing is fetched for a comparison further down the page. The images themselves are the real weight — compress them first, and note that both are downloaded, not just the visible half.
How is this different from the Slider widget?
A slider moves between separate images, one at a time, usually with autoplay and dots. This moves a boundary within a single composite of two aligned photographs, and nothing rotates. Use the slider for a rotating banner and this for a comparison.
Can I use it for a product configurator or a map overlay?
Yes — anything where two aligned images differ. Satellite and street layers, a floor plan and a render, a design mockup at two stages, a photo with and without an edit. The only requirement is that the two line up.
Is it really free?
Building the widget, previewing it and copying the embed code are free with no account. An account and a paid plan add saving the widget so you can edit it later and have every site it is embedded on update at once, plus the cursor-following and cross-fade interactions and the colour controls.