Before-and-after images: slider or side-by-side layout?

Identify the detail being compared

Did the wall finish change, the room layout, or a small joint? Overlapping images may work when both views show the same area with similar framing. Different camera angles may not produce a meaningful match as the divider moves. In that case, two labelled views can be clearer.

Do not ask one slider to explain every change. Introduce the detail with a short sentence and make the date or stage of each view clear. Our annotated project-image guide separately addresses evidence and context; the decision here concerns how people operate the comparison.

Do not make dragging the only route

If you choose a slider, plan a visible handle, a meaningful label and keyboard behaviour. The W3C slider pattern describes arrow-key adjustments and Home and End access to the limits. Drawing a divider over the image does not implement those behaviours. Use an appropriate native form control as a starting point where practical.

A label should describe the value being changed, such as the share of the after view, rather than simply saying “slider”. Choose an initial position that reveals both sides. Keep focus visible against the image and make the target comfortable to operate. Complete the relevant accessibility checks in actual use, rather than assuming that the visual mockup is sufficient.

Consider two layout scenarios

Test the image and page scrolling together

Horizontal dragging can conflict with vertical page scrolling. Make the handle discoverable rather than hiding the interaction across the whole photograph. Someone should not need random taps to learn that a control exists. Its boundary within the page also needs to be understandable.

W3C warns that custom sliders can present difficulties with some touch-based assistive technologies. A desktop keyboard test therefore is not enough. Review a real phone and the relevant assistive technology. Separate links or buttons for the two images offer a useful alternative that does not depend on completing one particular gesture.

Make the stable view an equivalent presentation

A paired layout can show two images together on a desktop and stack them on a phone. Keep each label associated with its image. Do not squeeze text over important details when the screen narrows. The visitor should be able to find the comparison point in both views.

Explain the change in text; “spot the difference” alone will not help someone who cannot interpret the images. If an animated introduction is included, it should not take control away during inspection. A position selected by the visitor should not move unexpectedly. Avoid implying that the complete comparison is ready before both images have loaded.

Approve the task, not just the effect

Ask a reviewer to identify one particular difference. Observe which control they choose, whether the labels make sense and whether they can return to the previous view. Include long headings, slow image loading and enlarged text in the review.

Our project portfolio contains real work presentations; the drawings here are not before-and-after evidence from those clients. Include the control, stable alternative, explanatory text and device review together in the website design scope. An attractive effect earns its place when it makes inspection more useful.