CSS grayscale filter (go from grayscale to full color on hover) #css #sethneilson

gistfile1.css

/* At first the image is grayscaled by the filter and then on hover the filter is set to 0% */
img {
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
}

img:hover {
  -moz-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  
  -o-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
}