#2190 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.


Es ist möglich verschiedene Effekte zu kombinieren indem mehrere Klassen in einen Block angewendet werden.


Tipp: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel "ThemeWare® CSS-Klassen für Erlebniswelten" (Link siehe unten).

Anwendungsbeispiele findest du in unseren Demoshops: Demos


ThemeWare® CMS-Hover-Effekte für Bilder


Klasse Bereich Funktionsbeschreibung
  • twt-custom-cms-image-hover-1
  • twt-cms-image-hover-opacity
Block Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
  • twt-custom-cms-image-hover-2
  • twt-cms-image-hover-zoom-in
    [ab ThemeWare® 0.5.0]
  • twt-cms-image-hover-zoom
Block Vergrößert Bilder mit einem Link (Hover-Effekt).
  • twt-cms-image-hover-3
  • twt-cms-image-hover-zoom-out
Block Verkleinert Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-4
  • twt-cms-image-hover-gray-scale
    [bis ThemeWare® 0.5.0]
  • twt-cms-image-hover-grayscale-out
    [ab ThemeWare® 0.5.0]
Block Färbt graue Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-5
  • twt-cms-image-hover-grayscale-in
    [ab ThemeWare® 0.5.0]
  • twt-cms-image-hover-grayscale
    [ab ThemeWare® 0.5.0]
Block Graut Bilder mit einem Link aus (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-6
  • twt-cms-image-hover-shine
Block Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-7
  • twt-cms-image-hover-flash
Block Lässt Bilder mit einem Link aufblitzen (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-8
  • twt-cms-image-hover-rotate-left
    [ab ThemeWare® 0.5.0]
Block Dreht Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-9
  • twt-cms-image-hover-rotate-right
Block Dreht Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.3.4]
  • twt-cms-image-hover-10
  • twt-cms-image-hover-rotate-out
  • twt-cms-image-hover-rotate
Block Dreht Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.5.0]
  • twt-cms-image-hover-11
  • twt-cms-image-hover-blur-in
  • twt-cms-image-hover-blur
Block Dreht Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.5.0]
  • twt-cms-image-hover-12
  • twt-cms-image-hover-blur-out
Block Dreht Bilder mit einem Link (Hover-Effekt). [ab ThemeWare® 0.5.0]

Beispiele:


Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

4bd7069c402c32917cb425a65338c557
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

Speichern Cookie-Einstellungen Akzeptieren und Schließen