Divi Tutorial: CSS Grayscale Image and Colour on Hover

Learn how to implement grayscale images like I have on my blog page. Catered for the Divi Wordpress theme so you don't have to find the selectors yourself.
1 min read

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 comments 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. 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 Reply

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

Recent Posts

April 24, 2021
How to develop a reliable and consistent brand for creators

A consistent brand is one of the most important elements in any industry. When people expect to see a certain type of product each day, they have to recognise that brand and choose to support it.

Read More
April 16, 2021
XP Pen Deco Pro better than Wacom Intuos Pro?

The XP Pen Deco Pro was released in 2018 with its sights firmly set on dethroning the Wacom Intuos Pro, has it done it, for half the price?

Read More
April 5, 2021
How To Build A Remarkable Personal Brand with Video

Video is massive, and it's only getting bigger each year. In this post I'm going to be exploring what we can do with video to build your personal brand.

Read More

Like free stuff?

I'm working on a free Content Creator Kit. You'll get a bunch of design elements to help design and brand your online presence... Sign up with the button below to be one of the first to get it!
SEND ME THE KIT
Design & content © 2021 Chris Hart. All Rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram