Select Page

Borrowed the code from CSS Grayscale Images on Hover and just provided some coding for the Divi theme.

My brand colours are (for now) black and white with a gold ‘pop’. I wanted my images to be black and white (greyscale) and colour on hover. To do this I used the above article and made it work for the featured images on the blog like so:

/*CSS Grayscale blog images*/
.blog a img{ filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
}
.blog a img:hover{ filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,#grayscale");
}

CSS Grayscale for Divi

Nifty!

So to get it working for Divi, I narrowed the selectors to .blog, so the affect is only on my blog layout.

Pin It on Pinterest