---
title: "Before/after image: a slider comparison"
description: "Create a visual comparison between two stacked images that the visitor reveals with a slider, perfect for showing a before/after transformation."
url: https://docs.vivlab.com/en/editor/menu/image-before-after
---

# Before/after image

The **Before/after image** element creates a visual comparison between two images placed one over the other. The visitor moves a center slider to gradually reveal the second image. It's a format very common to show a transformation (before/after retouching, restoration, treatment, renovation…).

## Load the two images

The side panel shows two slots **Image #1** and **Image #2**. For each one:

- If no image is loaded, drag and drop or click to upload a file.
- If an image is already there, the cropping tool appears to adjust the framing. The **Change image** button lets you replace it.

Both images must share the same proportions (set by the dimensions of the block on the canvas), otherwise the comparison would look visually unbalanced.

<DocsScreenshot name="editor-before-after-slots" alt="The two upload slots for comparison images." :width="347" :height="197" />

## Style

The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [background](https://docs.vivlab.com/en/editor/style/background.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [corner radius](https://docs.vivlab.com/en/editor/style/border-radius.md), [shadow](https://docs.vivlab.com/en/editor/style/box-shadow.md), [inner margins](https://docs.vivlab.com/en/editor/style/padding.md), [filters](https://docs.vivlab.com/en/editor/style/filter.md) and [transitions](https://docs.vivlab.com/en/editor/style/transition.md). The [Mockup](https://docs.vivlab.com/en/editor/style/mockup.md) subsection is also listed there: the device you pick frames the whole comparison, and the slider stays usable inside the screen.