CSS Grayscale for Divi Header

Divi Tutorial: CSS Grayscale Image and Colour on Hover

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.