CSS Filters: Grayscale Effect on Image Hover

Grayscale effect on image hover using CSS filters. CSS Filters are not supported by all browsers. So make sure that you are using latest browser.

css-filters-grayscale-image-hover

For this tutorial, we use webkit browser such as google chrome.

Even though it is not supported by all browsers, CSS filters will be useful for some handy operations such as grayscale, blur etc…

Demo

Hover the image below:

css-filter-grayscale-image-hover

CSS Source


img:hover{
-webkit-filter:  grayscale(1);
}

You can give it a smooth effect using CSS Transition

Demo

Hover the below image:

css-filter-grayscale-image-hover

CSS Source


img:hover{
-webkit-transition: all 1s ease;
-webkit-filter:  grayscale(1);
}
img{
-webkit-transition: all 1s ease;
}

That’s it for this time, Comment your doubts and feedback below. I’ll see you soon!


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

One comment on “CSS Filters: Grayscale Effect on Image Hover”

Leave a Reply

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