Divi Tutorial: CSS Grayscale Image and Colour on Hover

CSS Grayscale for Divi Header

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


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