# Image - Compare

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="/files/XirGUUqVRUxW3rPhI3wx" alt=""><figcaption></figcaption></figure>

### General Configuration

<figure><img src="/files/MMNN1s54GIwRw0eD9QGl" 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="/files/isj99lrIww3E8USThrLn" alt=""><figcaption></figcaption></figure>

### Layout Settings

<figure><img src="/files/lOdcGjyYPdCGhgi4bd7s" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/bild-vergleich.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.