JSFiddle - React, Tailwind, and code Playground

HTML

<div class="body_copy">
    <a href="http://placekitten.com/600/400"><img src="http://placekitten.com/370/247" height="247"/></a>
    <p>some text</p>
    <a href="http://placekitten.com/600/400"><img src="http://placekitten.com/370/247" alt="mydescr2" /></a>
</div>

CSS

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


.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;
    display: block;
    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;
}

JavaScript

$(".body_copy a:has(img)").addClass('fancy overlay_link').attr({
    rel: 'mypage',
    title: function() {
        return $(this).find("img").attr("alt");
    }
}).append($('<span class="overlay" />'));
  
$('a .overlay').each(function(){
    $(this).parent().css('width', $(this).prev('img').outerWidth() + "px");
    $(this).parent().css('height', $(this).prev('img').outerHeight() + "px");         
});