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>
<style>
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;
    display:none;
}
</style>


</head>

<body>
<a href="#" class="box" id="over_1"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_1" class="boxover">hello</div></a>
<a href="#" class="box" id="over_2"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_2" class="boxover">there</div></a>
<a href="#" class="box" id="over_3"><img src="pier.jpg" alt="test" width="150" height="150" /><div id="box_over_3" class="boxover">rob</div></a>


</body>

</html>

JavaScript

$(function() {
    $('.box').hover(over, out);
});

function over(event) {
    var $this = $(this);
    $this.data('hoverTimer', setTimeout(function(){
        timer = null;
        var over_id = '#box_over_' + $this.attr('id').replace('over_', '');

        $(over_id).fadeIn(400);
        $(over_id).css("display", "normal");
    }, 200));
}

function out(event) {
    var timer = $(this).data('hoverTimer');
    
    if (timer !== null) {
        clearTimeout(timer);   
    }
    var over_id = '#box_over_' + $(this).attr('id').replace('over_', '');

    $(over_id).fadeOut(400);
}