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

von | 28.10.2017 | 0 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 Divi Theme kaufen
Aktuelle Beiträge

0 Kommentare

Einen Kommentar abschicken

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

NEWSLETTER ABONNIEREN

Wöchentlich die neusten Beiträge und Tutorials ins E-Mail Postfach.

NEWSLETTER ABONNIEREN

Wir haben dir eine Newsletter Bestätigung zugesendet. Klicke hierfür auf den Bestätigungsbutton in der E-Mail