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">
            <div class="item_long" >Lorem ipsum blah blah blah</div>
        </div>
    </div>
<a href="" class="item_link">

CSS

a.item_link{
    display: inline;    
}
div.item_overflow{
    overflow: hidden;
}
div.item_container{
    position: relative;
    background-color: #ffffff;
    float: left;
    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{
    display: none;
    background-color: #777777;
    width: 250px;
    height: 210px;
    float:left;
}

JavaScript

$(document).ready(function(){
        $("div.item_container").hover(function(){
            $("div.item_body").show("slide",{direction:"top"},500);
        },function(){
            $("div.item_body").hide("slide",{direction:"top"},500);
        });
    });