Convert color image to black and white with CSS

In this tutorial, we’re going to teach you how to convert color image into black and white(grayscale) image.

This is very useful when you want to show color and black & white, both versions of the same image on your webpage without using two different image.

CSS filter will change color image to grayscale very easily.

Preview:

Hover on image to change image into black & white.

Html:

<img class="change-to-grayscale" src="image.jpg" alt="Black and White" /> 

Css:

.change-to-grayscale {
    filter: grayscale(100%);
}

Above css is compatible with all modern browsers except internet explorer (version 6-9). For IE 6 to 9 you have to add the following:

.change-to-grayscale {
    filter: gray;
    filter: grayscale(100%);
}

Change to color

Hover on image to change image into color.

Add this css to convert image into grayscale when your page load and then change to color on hover.

.change-to-color{
    filter: gray; 
    filter: grayscale(100%);
}
.change-to-color:hover{
    filter: none;
    filter: grayscale(0%);
}

Add transition

Add below given css to add some transition for better result.

.change-to-grayscale {
    filter: gray;
    filter: grayscale(100%);
    transition:filter 0.3s ease-in;
}

Change to color with transition

Hover on image to change image into color with transition.

** image source : Pexels