CSS hover color effect

by nickpish

HTML

<div>
    <img src="http://0.tqn.com/d/graphicssoft/1/0/e/N/5/psptubez_dot_com_005.png"/>
</div>

CSS

img {
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
}

div:hover img { 
  /* -webkit-filter: grayscale(100%); */
  -webkit-filter: brightness(50%) contrast(0%) grayscale(100%);
  /* filter: contrast(10000%) brightness(0) saturate(100%) grayscale(100%); */
  mix-blend-mode: color-burn;/* bake it to black */
}