JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body_copy">
    <a class="fancy overlay_link" rel="test" href="http://placekitten.com/600/400" title="descr">
        <img src="http://placekitten.com/370/247" alt="sweet" />
        <span class="overlay"></span>
    </a>
</div>

CSS

.overlay_link {
    position: relative;
    display: block;
}

.overlay_link img {

}

.overlay {
/*black(ish) overlay*/
/* background: #111;
background: rgb(34, 34, 34);
background: rgba(34, 34, 34, 0.8); */

/*orange overlay*/
    background: #d87b37;
    background: rgb(216, 123, 55);
    background: rgba(216, 123, 55, 0.8);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 370px;
    height: 247px;
    max-width: 100%;
    max-height: 247px;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.overlay_link:hover .overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}