> 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

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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.