Schwarzweiß Hover Effekt für Bilder und Fotos mit Divi

von | 28.10.2017 | 2 Kommentare

Der Mouseover bzw. Hover-Effekt ist eine tolle Möglichkeit um Elemente aufzuwerten. In diesem Beitrag zeigen wir, wie ein Schwarzweiß Hover Effekt für Bilder und Fotos mit CSS umgesetzt werden kann.

Bilder Schwarz Weiß Effekt bei Hover mit Divi

Hover-Effekt: Bilder von farbig zu schwarzweiß mit CSS

Für diesen Effekt fügen wir als erstes ein neues Bild-Modul hinzu und laden unser Foto in Farbe hoch. Anschließend klicken wir auf die Registerkarte Erweitert.

Hover-Effekt: Bilder von Schwarzweiß zu Farbe mit CSS

In das Feld CSS-Klasse geben wir grayscale ein und speichern die Änderung ab.

CSS Klasse definieren fuer Schwarzweiß Mouseover Effekt

Jetzt muss nur noch folgender Code-Schnipsel in das Feld benutzerdefinierte CSS eingefügt werden:

Das wäre es auch schon. Beachtet, dass der Effekt nur eintritt, wenn ihr dem Bild-Modul die CSS-Klasse grayscale zuweist. Für jedes Bild, bei dem der Hover-Effekt angewendet werden soll, ist die CSS-Klasse separat zu definieren.

Der Effekt wirkt sich wie folgt aus: 

Hover-Effekt: Bilder von schwarzweiß zu farbig mit CSS

Natürlich können wir den Effekt auch umkehren. Dafür laden wir erneut ein farbiges Bild hoch. Durch den CSS Code wird das Bild in schwarzweiß angezeigt. Beim herüberfahren mit der Maus, erhält es seine Farbe zurück. Als CSS-Klasse definieren wir hier colorize. 

Anschließend muss folgender Code-Schnipsel in das Feld benutzerdefinierte CSS eingefügt werden:

Der Effekt wirkt sich wie folgt aus:

Noch Fragen? Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann schreibt es in die Kommentare.
Anzeige
Aktuelle Beiträge
WordPress: Link auf Nofollow setzen

WordPress: Link auf Nofollow setzen

Wie setzte ich Links auf Nofollow? Wann sollen Links auf Nofollow gesetzt werden und was bedeutet Nofollow eigentlich? Das alles sind Fragen, die sich wohl irgendwann jeder beim Aufbau einer Website stellt. Ich persönlich halte das Thema für überbewertet und genau aus...

2 Kommentare

  1. Moe

    Halli Hallo,

    erstmal viele Dank für die super Tipps und Ratschläge.
    Mich würde interessieren was für Möglichkeiten es gibt eine Galerie mit Filtern auszustatten, ähnlich dem filterable portfolio. Leider habe ich dazu nichts im Internet gefunden.

    Liebe Grüße
    Moe

    Antworten
    • Daniel

      Moin Moe,
      ich selbst nutze nur selten Galerien mit WordPress. Aber es sollte kein Problem sein, mit etwas CSS, auch diese mit Filtern auszustatten.

      Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.