JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<img src="http://andthenwesaved.com/wp-content/uploads/2012/03/pay-off-your-debt-free-for-life-031612.jpg">

CSS

img {
    filter: sepia(100%);
    -webkit-filter:sepia(100%);
    -moz-filter:   sepia(100%);
    -o-filter:     sepia(100%);
}

img:hover {
  filter: sepia(0%);
  -webkit-animation: fadein 0.5s normal forwards; 
  -moz-animation:    fadein 0.5s normal forwards;
  -o-animation:      fadein 0.5s normal forwards;
}

@keyframes fadein {
   0% { 
        -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
        -o-filter: sepia(100%);
    }
  50% {
        -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
        -o-filter: sepia(100%);
    }
 100% { 
        -webkit-filter: sepia(0%);
        -moz-filter: sepia(0%);
        -o-filter: sepia(0%);
    }
}