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

ThemeWare® CMS-Hover-Effekte für Bilder

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

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.

Hinwes: Mehr Informationen findest du in der ThemeWare® Wissensdatenbank.

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

Lorem Ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Lorem Ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Lorem Ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

← zurück zur Demos-Übersicht