JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="overlay"></div>
</div>

CSS

div{
    background:url(http://placekitten.com/600/600) center center;
    width:400px;
    height:400px;
    
    -webkit-transition:all 2s;
    -webkit-filter: grayscale(100%);
}

div:hover{
    -webkit-filter: grayscale(0%);
}

div #overlay{
    opacity:.5;
    display:block;
    background: -webkit-linear-gradient(45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(-45deg, #777 25%, transparent 25%, transparent), -webkit-linear-gradient(45deg, transparent 75%, #777 75%), -webkit-linear-gradient(-45deg, #000 75%, #777 75%);
    
    background-size:2px 2px;
    width:400px;
    height:400px;
    
    -webkit-transition:opacity 2s;
}

div:hover #overlay{
    opacity:0;   
}