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

In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Hover-Klassen verschönern kannst.

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)

Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

---

ThemeWare® CSS-Hover-Klassen

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.

CSS-Klasse	Bereich	Funktionsbeschreibung
twt-cms-image-hover-opacity	Block	Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-zoom-in bzw. twt-cms-image-hover-zoom	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).
twt-cms-image-hover-grayscale-in bzw. twt-cms-image-hover-grayscale	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).
twt-cms-image-hover-rotate-out bzw. twt-cms-image-hover-rotate	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-blur-in bzw. twt-cms-image-hover-blur	Block	Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-blur-out	Block	Dreht Bilder mit einem Link (Hover-Effekt).

Hinweis: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel ThemeWare® CSS-Klassen für Erlebniswelten.

Beispiel

Rechts: Hover-Effekt "twt-cms-image-hover-grayscale"

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".