JSFiddle - React, Tailwind, and code Playground

HTML

<img class="content1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" style="width:100%;position:relative">
<div class="content" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; text-align: center; color: white; display: none; background: rgba(0, 0, 0, 0.901961);">
     <h1 style="color:white; pointer-events: none;">hiiiiiiiiiiiiiiiiiii</h1>
</div>

JavaScript

$('.content1').mouseover(function () {
    $('.content').show();
});
$('.content').mouseout(function () {
    $('.content').hide();
});