> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/bild-vergleich.md).

# Image - Compare

Before/After Slider

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.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FLop1W85Z7nv9Z70F38Ev%2FBildschirmfoto%202024-10-07%20um%2022.25.56.png?alt=media&amp;token=60d6b472-dc85-4044-b131-6671e361f62f" alt=""><figcaption></figcaption></figure>

### General Configuration

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FXWEfeknXdnVytCvlNB3R%2FBildschirmfoto%202024-10-07%20um%2022.26.49.png?alt=media&amp;token=d0da865f-9214-4835-8def-f6535db474f7" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="262">Function</th><th>Description</th></tr></thead><tbody><tr><td>General layout (1)</td><td>Landscape = Images side by side<br>Portrait = Images stacked</td></tr><tr><td>Custom size (2)</td><td>If this function is disabled, the uploaded images will not be cropped and delivered in their original size.</td></tr><tr><td>Show labels (3)</td><td>Set labels for the before and after areas. You can also use HTML.</td></tr><tr><td>Animation on mouseover (4)</td><td>Normally, a click is required to operate the slider. With this function, the slider moves as soon as the mouse hovers over the area.</td></tr></tbody></table>

### Media Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fe3e5cHxm1Giibu18IHSp%2FBildschirmfoto%202024-10-07%20um%2022.27.40.png?alt=media&amp;token=54e0ba29-bdbf-40a9-ad32-f964930caa54" alt=""><figcaption></figcaption></figure>

### Layout Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F6o0wnxOwFyKV7hff1Nib%2FBildschirmfoto%202024-10-07%20um%2022.28.06.png?alt=media&amp;token=49c24042-286e-487c-aa58-69a89b78f8bd" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Function</th><th>Description</th></tr></thead><tbody><tr><td>Slider color (1)</td><td>You should use a contrasting color here; otherwise, the slider may be overlooked.</td></tr><tr><td>Slider shadow (2)</td><td>To stand out more from the images.</td></tr><tr><td>Slider circle (3)</td><td>A circle is added around the arrows, depending on the use case and preference.</td></tr><tr><td>Slider circle blur (4)</td><td>The background of the arrows is blurred within the circle.</td></tr><tr><td>Slider start point (5)</td><td>Default is at 50%, which is the exact middle of both images.</td></tr><tr><td>Slider smoothing (6)</td><td>A slight delay effect when moving the slider back and forth.</td></tr><tr><td>Slider smoothing strength (7)</td><td>The higher the value, the stronger the smoothing effect.</td></tr></tbody></table>