Bilder Schwarz Weiß Effekt bei Hover mit Divi

Black and white hover effect for images and photos with Divi

12. February 2020

The mouseover or hover effect is a great way to enhance elements. In this article we show how a black and white hover effect for images and photos can be implemented with CSS.

 

Images Black and White Effect for Hover with Divi

 

Hover effect: images from color to black and white with CSS

For this effect we first add a new image module and upload our photo in color. Then we click on the tab Advanced

 

Hover effect: images from black and white to color with CSS

 

In the field CSS-Class we enter grayscale and save the change.

 

Define CSS or black and white mouseover effect

 

Now you only have to insert the following code snippet into the field user defined CSS:

 

 

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

That’s about it. Note that the effect only occurs if you assign the CSS class grayscale to the image module. For each image where the hover effect should be applied, the CSS class has to be defined separately.

The effect has the following effect:

 

 

Hover effect: images from black and white to color with CSS

Of course we can also reverse the effect. To do this, we upload a colored image again. Due to the CSS code the image will be displayed in black and white. If you move the mouse over it, it gets its color back. As CSS class we define here colorize. 

Then the following code snippet must be inserted into the field user defined CSS :

 

 

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

Any questions? Suggestions for improvement or suggestions for further articles? Then write it in the comments.

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

Comments

Tell us what you think! Reply now

Your email address will not be published.