CSS3 Grayscale It All B!tches..



<style>
#grayscale_example:before{
  transition: -webkit-filter .5s ease-in-out;
  /* assuming some color applied to container */
  background: none lightblue; color: yellow;
  content: '[Hover Me] Color: YES';
}

#grayscale_example:hover:before{
  /* filter will be applied across container and all inner-content */
  -webkit-filter: grayscale(100%);
  content: '[UnHover ] Color:  NO';
}
</style>
<span id="grayscale_example"></span>