Last active
September 27, 2018 03:04
-
-
Save bergantine/5243223 to your computer and use it in GitHub Desktop.
CSS grayscale filter (go from grayscale to full color on hover) #css #sethneilson
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Seems not to work with Firefox 42.0 (Mac OS X El Capitan). The image is always colored.
Get it to work on Firefox, checkout my fork: https://gist.github.com/gedankennebel/a4c9367cda02ad7e826f
Thanks man. This help a lot :) 👍
You shouldn't need the transition properties on the img:hover selector since they're already there in the img selector.
Gracias full 👍
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
does this work with IE ?