JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d">
    
<img src="http://markgroupusa.com/wp-content/uploads/2011/03/placeholder.jpg" alt="My image" class="do-fade" />

<br />

<img src="http://markgroupusa.com/wp-content/uploads/2011/03/placeholder.jpg" alt="Another image" class="do-fade" />

<br />

<img src="http://markgroupusa.com/wp-content/uploads/2011/03/placeholder.jpg" alt="Normal image" />

</div>

CSS

#d img {
    width: 200px;
    height: 150px;
}

div.black-box {
    position: absolute;
    background: #000;
}

JavaScript

$(document).ready(function() {
    $("img.do-fade").each(function () {
        var t = $(this);
        var d = $('<div class="black-box"></div>').insertAfter(this);
        d.css({ width: t.width(), height: t.height(), top: t.position().top });
        
        d.fadeTo("fast", 0);
        
        d.bind("mouseenter", function() {
            $(this).fadeTo("fast", .8);
        }).bind("mouseleave", function() {
            $(this).fadeTo("fast", 0);
        });
    });
});