JSFiddle - React, Tailwind, and code Playground

HTML

<div class="description-box">dasdasdasdsd</div>
<div class="image">
    <img alt="" class="icon" src="work/Maru/img/maru-3.jpg">
</div>
<br>

CSS

.description-box {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index:10;
    width:40%;
    height:40%;
    background-color:#e8e8e8;
}
.image img {
    position:absolute;
    width:100%;
    height:100%;
    background-color: #828282;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

JavaScript

$(".description-box").on({
    mouseover: function () {
        clearTimeout(timer);
        $(".image img").fadeIn();
    },
    mouseout: function () {
        timer = setTimeout(function () {
            $(".image img").fadeOut();
        }, 100);
    }
});