JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div class="project">
<a class="project_link" href="/reap-renewable-energy-and-preservation">
    
    <img src="http://i.stack.imgur.com/um1Bo.jpg?s=128&g=1" alt="Test" class="Image" />
  </a>
<div class="info_overlay" style="display:none;">
<h3>REAP</h3>
<p></p>
<p><a href="project/reap-renewable-energy-and-preservation">VIEW</a>
    </p>
</div>
<!-- end info_overlay -->

</div>
<!-- end project

CSS

.info_overlay
{
    width:100px !important;
    height:100px;
}

JavaScript

$("a.project_link").hover(function () {
    $(this).find(".Image").hide();
    $(this).next(".info_overlay").show();
});

$(".project").mouseleave(function(){

    $(this).find("img").show();
    $(this).find(".info_overlay").hide();

})