Links

Bilder in CMS-Blöcken mit Hover-Effekten verschönern

In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit Hover-Effekten verschönern kannst.
Mit ThemeWare® erhältst du eine große Auswahl an CSS-Klassen, welche dir verschiedenste Hover-Effekte für Bilder in CMS-Blöcken ermöglichen.
Tipp: Anwendungsbeispiele findest du in unseren Demoshops.

ThemeWare® CSS-Hover-Effekte für Bilder

Stand: Die Klassen auf dieser Seite wurden mit ThemeWare® 0.3.4 und 0.5.0 erweitert.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
twt-custom-cms-image-hover-1
bzw.
twt-cms-image-hover-opacity
Block
Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
twt-custom-cms-image-hover-2
bzw.
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-3
bzw.
twt-cms-image-hover-zoom-out
Block
Verkleinert Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-4
bzw.
twt-cms-image-hover-gray-scale
bzw.
twt-cms-image-hover-grayscale-out
Block
Färbt graue Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-5
bzw.
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-6
bzw.
twt-cms-image-hover-shine
Block
Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-7
bzw.
twt-cms-image-hover-flash
Block
Lässt Bilder mit einem Link aufblitzen (Hover-Effekt).
twt-cms-image-hover-8
bzw.
twt-cms-image-hover-rotate-left
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-9
bzw.
twt-cms-image-hover-rotate-right
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-10
bzw.
twt-cms-image-hover-rotate-out
bzw.
twt-cms-image-hover-rotate
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-11
bzw.
twt-cms-image-hover-blur-in
bzw.
twt-cms-image-hover-blur
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-12
bzw.
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.
Beispiele
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".