Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS grayscale filter (go from grayscale to full color on hover) #css #sethneilson
img:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
img {
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}
@gedankennebel

This comment has been minimized.

Copy link

@gedankennebel gedankennebel commented Nov 4, 2015

does this work with IE ?

@gedankennebel

This comment has been minimized.

Copy link

@gedankennebel gedankennebel commented Nov 4, 2015

Seems not to work with Firefox 42.0 (Mac OS X El Capitan). The image is always colored.

@gedankennebel

This comment has been minimized.

Copy link

@gedankennebel gedankennebel commented Nov 4, 2015

Get it to work on Firefox, checkout my fork: https://gist.github.com/gedankennebel/a4c9367cda02ad7e826f

@leovarmak

This comment has been minimized.

Copy link

@leovarmak leovarmak commented Apr 2, 2016

Thanks man. This help a lot :) 👍

@olivertappin

This comment has been minimized.

Copy link

@olivertappin olivertappin commented Apr 26, 2016

You shouldn't need the transition properties on the img:hover selector since they're already there in the img selector.

@sousey

This comment has been minimized.

Copy link

@sousey sousey commented Jul 22, 2016

Gracias full 👍

@rmkane

This comment has been minimized.

Copy link

@rmkane rmkane commented May 17, 2017

Twitch is currently running a Mister Rogers marathon at https://twitch.tv/MisterRogers and they are using a grayscale filter to make the website appear in black and white to go along with the first season (1968).

I noticed the following CSS rules are being applied to the <body> element on the page.

document.body.style = "transition: filter 5000ms ease-out; filter: grayscale(100%);"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment