<div class="ba"><div class="af">After</div><div class="bf"><span>Before</span></div></div>About this slider
A comparison panel where dragging the corner of the top layer reveals the layer beneath, using resize: horizontal.
How it works
Two layers sit on top of each other. The bottom layer shows the after state. The top layer shows the before state, has overflow hidden and resize: horizontal, so the browser gives it a drag handle. Dragging changes its width, and the label inside stays at a fixed width so it does not squash as the layer shrinks.
Ways to customise it
- Replace the gradients with two real images of the same size.
- Change the starting width of 50%.
- Edit the white divider on the border-right.
Good to know
Native resize works with a mouse but not on every touch device, and has no keyboard control. For a fully accessible comparison slider use a range input with script. Describe both images in text.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.