JSFiddle - React, Tailwind, and code Playground

HTML

<div class="work--overlay">

</div>

CSS

.work--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient( rgba(64,56,43,0), rgba(0,0,0,0), rgba(0,0,0,0));
    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

    .work--overlay:hover {
      opacity:1;
      background: radial-gradient( rgba(64,56,43,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    }