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;
    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;
    z-index: 99;
}
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{
    background-color: #777777;
    height: 210px;
    left: 20px;
    position: absolute;
    width: 250px;
    z-index: 9;
}

JavaScript

$(document).ready(function(){
        $("div.item_container").mouseenter(function(){
            $("div.item_body").animate({
    left: '+252'
  }, 300, function() {
  });
        });
        $("div.item_container").mouseleave(function(){
            $("div.item_body").animate({
                left: '-252'                
            }, 300, function(){});
        });
    });