Skip to content

Instantly share code, notes, and snippets.

@bergantine

bergantine/gist:5243223

Last active September 27, 2018 03:04
Show Gist options
  • Star 29 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save bergantine/5243223 to your computer and use it in GitHub Desktop.
Save bergantine/5243223 to your computer and use it in GitHub Desktop.
Download ZIP
CSS grayscale filter (go from grayscale to full color on hover) #css #sethneilson
Raw
gistfile1.css
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;
}
@olivertappin
Copy link

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

@sousey
Copy link

sousey commented Jul 22, 2016

Gracias full 👍

@rmkane
Copy link

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