# Hover-Effekte für Bilder in CMS-Blöcken

## Hover-Klassen – Hover-Effekte für Bilder

Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen für Bilder in CMS-Blöcken. Diese CSS-Klassen ermöglichen dir, verschiedene Hover-Effekte für Bilder in CMS-Blöcken zu nutzen.

> Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
>
> * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Bild-Hover-Effekte laden (optional)

{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Bilder-in-CMS-Bloecken-mit-Hover-Effekten-verschoenern/).
{% endhint %}

***

## **ThemeWare® CSS-Hover-Klassen**

{% hint style="danger" %}
**Achtung**: Die alten CSS-Klassen `twt-custom-cms-image-hover-1`, `twt-custom-cms-image-hover-2` sowie `twt-cms-image-hover-gray-scale` werden in ThemeWare 4.0 entfernt.
{% endhint %}

| CSS-Klasse                                                                                                               | Bereich | Funktionsbeschreibung                                             |
| ------------------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------- |
| **twt-cms-image-hover-opacity**                                                                                          | Block   | Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt). |
| <p><strong>twt-cms-image-hover-zoom-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-zoom</strong></p>           | Block   | Vergrößert Bilder mit einem Link (Hover-Effekt).                  |
| **twt-cms-image-hover-zoom-out**                                                                                         | Block   | Verkleinert Bilder mit einem Link (Hover-Effekt).                 |
| **twt-cms-image-hover-grayscale-out**                                                                                    | Block   | Färbt graue Bilder mit einem Link (Hover-Effekt).                 |
| <p><strong>twt-cms-image-hover-grayscale-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-grayscale</strong></p> | Block   | Graut Bilder mit einem Link aus (Hover-Effekt).                   |
| **twt-cms-image-hover-shine**                                                                                            | Block   | Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt).    |
| **twt-cms-image-hover-flash**                                                                                            | Block   | Lässt Bilder mit einem Link aufblitzen (Hover-Effekt).            |
| **twt-cms-image-hover-rotate-left**                                                                                      | Block   | Dreht Bilder mit einem Link (Hover-Effekt).                       |
| **twt-cms-image-hover-rotate-right**                                                                                     | Block   | Dreht Bilder mit einem Link (Hover-Effekt).                       |
| <p><strong>twt-cms-image-hover-rotate-out</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-rotate</strong></p>      | Block   | Dreht Bilder mit einem Link (Hover-Effekt).                       |
| <p><strong>twt-cms-image-hover-blur-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-blur</strong></p>           | Block   | Dreht Bilder mit einem Link (Hover-Effekt).                       |
| **twt-cms-image-hover-blur-out**                                                                                         | Block   | Dreht Bilder mit einem Link (Hover-Effekt).                       |

{% hint style="info" %}
**Hinweis**: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}

**Beispiel**

<figure><img src="/files/Fn2t9aecMc5KnObIngac" alt=""><figcaption><p>Rechts: Hover-Effekt "twt-cms-image-hover-grayscale"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Bild-Hover-Effekte" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
{% endhint %}


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-hover-effekten-verschoenern.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.