Grayscale images using CSS

CATEGORY / Tutorial, Web, Wordpress TAGS / code, css, filters, grayscale, webkit AUTHOR / admin DATE / January 13, 2018

So the challenge today is to see if I can automatically change an image to grey without using Photoshop or any other image editing software. With CSS and browser support improving every month, I was sure this is probably a simple style guide reference.

Initially advice on the web suggests using a javascript code or several variants on that principle, but I had heard that webkit filters are generally supported well by IE, Chrome, Firefox and Safari.

What I wanted to achieve is to take a colour photo and have it showing as a full grayscale image. Then when hovered over it would turn colour possbily with a smooth transition and finally if clicked it would open up a large colour version of the image.

Grayscale images using CSS

It appears that the main CSS required for converting an image to Grayscale is:

img {
   -webkit-filter: grayscale(100%);
}

img a:hover {
   -webkit-filter: hue-rotate(50deg); 
   -webkit-filter: grayscale(0%);
}

Just to be on the safe side I will add the full compatible CSS for the filter effect.

img {
   -webkit-filter: grayscale(100%); 
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}

I will post the full effect once its live on the new web site

Leave a Reply

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