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:1;
    display:block;
    background: -webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
-webkit-radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 46%),
    url(http://placekitten.com/600/600);
    background-position: 0 0, 2px 2px, center center;
    background-size:4px 4px, 4px 4px, 600px 600px;
    width:400px;
    height:400px;
    
    -webkit-transition:opacity 2s;
}

div:hover #overlay{
    opacity:0;   
}