JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"     type="text/javascript"></script>
<title>Robs Test</title>

</head>

<body>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">hello</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">there</div></a>
<a href="#" class="box"><img src="anyimage.jpg" alt="test" width="150" height="150" /><div class="boxover">rob</div></a>

</body>

</html>

CSS

body{background:gray;}
div{position:relative;}
.box{
    position:relative;
    width:150px;
    height:150px;
    float:left;
    display:block;
    background:black;
    margin-right:20px;
}
.boxover{
    position:absolute;
    top:10px;
    left:0px;
    width:100%;
    height:20px;
    z-index:100;
    background:white;
    opacity:0;
}

JavaScript

$('a').mouseover(function(){
    //show the box
    $(this).children('.boxover').stop().animate({opacity:1},300);
});

$('a').mouseleave(function(){
    //hide the box
    $(this).children('.boxover').stop().animate({opacity:0},500);
});