JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="item_link">
    <div class="item_overflow">
        <div class="item_container" id="item_contents">
            <div class="item_title">TITLE</div>
            <div class="item_box"></div>
            <div class="item_descriptor">Lorem ipsum dyio.</div>
        </div>
        <div class="item_body" id="contents" style="display: none;">
            <div class="item_long" >Lorem ipsum blah blah blah</div>
        </div>
    </div>
</a>
<a href="" class="item_link">link</a>

CSS

a.item_link{
    display: inline;    
}
div.item_overflow{
    overflow: hidden;
}
div.item_container{
    position: relative;
    float: left;
    background-color: #ffffff;
    border: 1px solid #CCC;    
    width: 250px;
    height: 210px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #D8D8D8;
}
div.item_box{
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/content/company-background.jpg");
    width: 230px;
    height: 150px;
}
div.item_title{
    text-align: center;
    padding: .5em 0;    
}
div.item_descriptor{
    text-align: center;
    padding: 1em 0;
}
div.item_body{
    float:left;
    background-color: #777777;
    width: 250px;
    height: 210px;
}

JavaScript

$(document).ready(function(){
  



$(".item_link").mouseover(function(){
 $(".item_body").show();
});
    
$(".item_link").mouseout(function(){
$(".item_body").hide();
});
    
    
 });