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

Nifty!

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

4 thoughts on “Divi Tutorial: CSS Grayscale Image and Colour on Hover”

  1. Hi Chris,

    Just wondering if you might know how to apply a semi-transparent colour to blog images on hover?

    I’m using rgba(53,64,79,0.35) over the top of my full-width header image, so it would be great to use the same for the blog post images.

    I’ve seen ‘Style Your Posts With a Gray-scale Hover Effect’ in a post from Elegant Themes, but I’d prefer the above colour to 100% gray-scale if possible…

    Cheers in advance!

    Adam

  2. swostipriya lenka

    How can I apply the gray scale hover effect to a full width slide background image i divi theme. please reply me as I am a beginner ..

Leave a Comment

Your email address will not be published. Required fields are marked *