JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image onhover">

      <img src="http://dyskusja.biz/wp-content/uploads/2016/02/Grumpy-Cat.jpg" alt="cat" />
      
      <h2><span class="fademe">test</span></h2>

</div>

CSS

.image { 
   position: relative; 
   border: 1px solid #000000;
}

h2 span { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   display: none;
}

JavaScript

$(".onhover").hover(function(){
        $(".fademe").stop().fadeIn(500);
    },
    function(){
        $(".fademe").stop().fadeOut(500);
    });