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

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. Auf dieser Seite stellen wir dir die entsprechenden CSS-Klassen vor.

Opacity

Reduziert die Deckkraft für Bilder mit einem Link @hover.
CSS-Klasse: twt-custom-cms-image-hover-1 bzw. twt-cms-image-hover-opacity

Zoom-in

Vergrößert Bilder mit einem Link @hover.
CSS-Klasse: twt-custom-cms-image-hover-2 bzw. twt-cms-image-hover-zoom-in bzw. twt-cms-image-hover-zoom

Zoom-out

Verkleinert Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-3 bzw. twt-cms-image-hover-zoom-out

Grayscale out

Färbt graue Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-4 bzw. twt-cms-image-hover-grayscale-out

Grayscale in

Graut Bilder mit einem Link aus @hover.
CSS-Klasse: twt-cms-image-hover-5 bzw. twt-cms-image-hover-grayscale-in bzw. twt-cms-image-hover-grayscale

Highlight

Ein Highlight fährt über Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-6 bzw. twt-cms-image-hover-shine

Flash

Lässt Bilder mit einem Link aufblitzen @hover.
CSS-Klasse: twt-cms-image-hover-7 bzw. twt-cms-image-hover-flash

Rotate left

Dreht Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-8 bzw. twt-cms-image-hover-rotate-left

Rotate right

Dreht Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-9 bzw. twt-cms-image-hover-rotate-right

Rotate out

Dreht Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-10 bzw. twt-cms-image-hover-rotate-out bzw. twt-cms-image-hover-rotate

Blur in

Dreht Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-11 bzw. twt-cms-image-hover-blur-in bzw. twt-cms-image-hover-blur

Blur out

Dreht Bilder mit einem Link @hover.
CSS-Klasse: twt-cms-image-hover-12 bzw. twt-cms-image-hover-blur-out

Beispiel

CMS-Block "Drei Spalten, Bild/Text-Karten" mit Hover-Effekt "Rotate left" und "Grayscale out".