Embellishing images in CMS blocks with hover effects

ThemeWare® CMS hover effects for images

Embellishing images in CMS blocks with hover effects

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.

Note: You can find more information in the ThemeWare® Knowledge Base.

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