Bilder Schwarz Weiß Effekt bei Hover mit Divi

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

6. November 2018

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:

 

 

.grayscale img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.grayscale img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.9;
}

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:

 

 

.colorize img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .9;
}
.colorize img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}

Noch Fragen? Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann schreibt es in die Kommentare.

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

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