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.

color-photo

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.

color-photo

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.

color-photo

** image source : Pexels

If you liked this article, then please subscribe to our mailing list for latest posts and updates. Join us on Twitter and Facebook for regular updates.

Comments

Leave a Reply

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