JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div id="overlay"></div>
    <img id="image" src="http://i.stack.imgur.com/ncoqL.png">
</div>

CSS

#test{
    width:400px;
    height:400px;
    overflow:hidden;
    position:relative;
    padding:0;
    margin:0;
}

#overlay{
    width:400px;
    height:400px;
    background:url(http://i.stack.imgur.com/ncoqL.png) fixed;
    position:absolute;
    top:-400px;
    left:0px;
    z-index:100;
    -webkit-transition:.2s linear;
    transition:.2s linear;    
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

#test:hover #overlay{
    top:-200px;
    -webkit-transition:.2s linear;
    transition:.2s linear;
}