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");
}
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”
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
how would i do this for a whole gallery? thanks
Just wanted to say thank you, used and worked great!
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 ..