# 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-fuer-erlebniswelten](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten "mention").
{% endhint %}

**Beispiel**

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2F9Tah2U8VFSokCLYcoVvE%2Fimage.png?alt=media&#x26;token=6ac1496f-4acd-4e0d-9607-22cbb437fd64" 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 %}