JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    mouse here please!
    <div id="back"></div>
</div>

CSS

#container { 
    width: 500px; height: 500px;
    position: relative;
    background: transparent;
}    

#back { 
    width: 100%; height: 100%;
    top: 0; left: 0;
    position: absolute;
    opacity: 0;
    background: -webkit-linear-gradient(top, #ccc, #999);     
    z-index: -1;
    -webkit-transition: opacity 3s ease-out;
}    


#container:hover #back {
    opacity: 1;
}