Image - Compare
Before/After Slider
Last updated
Before/After Slider
Last updated
The image comparison element with a slider is an interactive feature that allows users to directly compare two images.
The slider enables the "Before-After" concept to be presented in an engaging way, allowing the user to control the view themselves. This element is particularly useful for visual representations of changes, such as renovations, makeovers, product comparisons, cosmetic treatments, or graphic adjustments.
| Function | Description |
|---|---|
General layout (1) | Landscape = Images side by side Portrait = Images stacked |
Custom size (2) | If this function is disabled, the uploaded images will not be cropped and delivered in their original size. |
Show labels (3) | Set labels for the before and after areas. You can also use HTML. |
Animation on mouseover (4) | Normally, a click is required to operate the slider. With this function, the slider moves as soon as the mouse hovers over the area. |
| Function | Description |
|---|---|
Slider color (1) | You should use a contrasting color here; otherwise, the slider may be overlooked. |
Slider shadow (2) | To stand out more from the images. |
Slider circle (3) | A circle is added around the arrows, depending on the use case and preference. |
Slider circle blur (4) | The background of the arrows is blurred within the circle. |
Slider start point (5) | Default is at 50%, which is the exact middle of both images. |
Slider smoothing (6) | A slight delay effect when moving the slider back and forth. |
Slider smoothing strength (7) | The higher the value, the stronger the smoothing effect. |
