How to change images from grayscale to color or vice versa on hover

An effect that always wows webdesign clients is images that change from color to grayscale or from grayscale to color when they move their mouse pointer over the image.

To get this effect working in the old days, you needed two images: one in color and one in grayscale. In CSS or HTML, you would make rules swapping one image for the other on hover.

Nowadays there is a great CSS property for that, named filter. The filter property allows you to add a grayscale filter of between 0 and 100% to your image on the fly.

Here’s how you can use this effect on your site.

Change images on hover from color to grayscale

First, let’s change the image from color to grayscale.

I create a class called colortobw that I can add to the block that contains the image (or in this case images, since I apply it to a gallery). I don’t want to apply the class to the whole block, just the image(s). This means that in the WordPress’ block editor I need to specify the element I want the class to apply to, in this case img.

The CSS code looks like this:

.colortobw img {
	-webkit-filter: grayscale(0) !important;
	filter: grayscale(0) !important;
}

.colortobw img:hover {
	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
}

The first CSS rule – the first four lines – indicates the default state of the filter. In this case, no grayscale whatsoever is applied to the image

You would assume that just the filter line would be enough, but no. Since your site is also visited from browsers using the WebKit browser engine, and WebKit does not acknowledge the filter property, the -webkit-filter property is added.

By the way, these lines don’t need to be included in this particular case. The images are already in color and no grayscale is applied. But it looks more neat to have them in there to indicate that something is going to happen to the filter property of the element.

The second rule applies a grayscale filter of 100% to the image when the mouse pointer hovers the image. This renders the image fully grayscale.

You next add the colortobw class to the images or gallery you want to target. To do this, select the block and go to the sidebar menu. Click on Advanced, and put the name in the Additional CSS class field excluding the dot before the name.

And this is the result of these lines of CSS code. Don’t forget to hover over it with your mouse pointer to see the effect:

Change images on hover from grayscale to color

Now, let’s change the image from grayscale to color.

Of course, you cannot add lifelike color to a grayscale image, so the images you load need to be full-color. Thought I’d mention it just for safety sake 😉

Next, I create a class called bwtocolor. The CSS code looks like this:

.bwtocolor img {
	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
}


.bwtocolor img:hover {
	-webkit-filter: grayscale(0) !important;
	filter: grayscale(0) !important;
}

As you can see, the assignment of the properties is opposite to the code above.

The first CSS rule – which indicates the default state of the filter – now applies a grayscale filter of 100% to the image. This means the image starts out as fully grayscale.

The second rule applies a grayscale filter of 0 to the image. This means no grayscale filter is applied, and the image shows in its original state: full-color.

You next add the bwtocolor class to the images or gallery you want to target as above.

The result works like this:

When you want to explore the myriad of uses of the CSS filter property, check out the page on this subject on W3Schools.

Are you making use of filters in your code? What sort of effect are you applying to the element on your pages? Share your experience in the comments below.