In this tutorial, I’m going to show you how-to convert your image to grayscale using CSS3 filter property’s grayscale function.Converting your image into grayscale will leave your image with a nice black and white image effect.

The Results

Normal:

Grayscale:

The HTML and CSS

The grayscale function uses a percentage, from 0% to 100%; where 0% leaves the image unchanged and 100% changes your image into grayscale.

Here is the HTML you would use to grayscale the image:

<img src="image.jpg" class="grayscale" />

Here is the CSS you would use to grayscale the image:

img.grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
}

You can also apply this effect when the image is hovered:

img.grayscale:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
}

Also instead of using percentages 100%, you could use percentages as a decimal, so 100% would be 1; for 80%, you would use 0.8.

img.grayscale
{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
}