Comment on page
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.
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 2.1 entfernt.CSS-Klassen
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".