Before After Divider

Compare two images with one divider. Visitors drag it, click anywhere on the image, or use the arrow keys, and it works with touch on phones.

Set everything from the properties panel: the before and after images, their labels, the start position, horizontal or vertical direction, a line or circle handle, and the ratio (follow the image, 4:3 or 16:9). Handle, label and accent colors and the label font are controls too, so it fits any site.

Both images should have the same size. It is fully responsive: it fills its container and keeps the image ratio. Without images it shows a simple placeholder so you can try the controls first. Free for personal and commercial projects.

See it in a full architecture site: the preview is a project page of our Parapet template: https://www.framer.com/marketplace/templates/parapet/