JSFiddle - React, Tailwind, and code Playground

HTML

<div id='map'>
    <div id='overlay'></div>
</div>

CSS

#map {
    height:100px;
    width:100px;
    background:red;
}
#overlay {
    z-index:2;
    background:black;
    height:100px;
    width:100px;
    opacity:0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
#overlay:hover {
    opacity:.8;    
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}