How to Make an Image Black and White on Hover in CSS?

To make an image black and white on hover, we can use the filter property in combination with the :hover pseudo-class selector.

The filter property takes several built-in CSS functions as a value which can be used to add visual effects to images. One of those functions is the grayscale() function.

The grayscale(%) function adds an amount of gray color to the images. 0% is the default which represents the original image. But if you pass 100% it will make the image fully gray which is nothing but the black and white version of the image.

The following example makes the image black and white on hover:

Example:

img:hover{
   filter: grayscale(100%);
}

You can even make the image semi-black and white if you pass the value 50% to the grayscale() function:

Example:

img:hover{
   filter: grayscale(50%);
}