JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="overlay"></div>
    <div id="hover">Some Text here????</div>
</div>

CSS

#container {
 width:400px;
 height:150px;
 position:relative;
 overflow:hidden;
 z-index:0;
 margin:0 auto;
 background:rgba(0,0,0,0);
 border:10px solid #414141;
}

#container:hover {
 border-color:rgba(0,0,0,1);
}

#overlay {
 background-color:rgba(0,0,0,0);
 display:block;
 position:absolute;
 top:0;
 left:0;
 width:400px;
 height:150px;
 z-index:1;
}

#hover {
 width:400px;
 display:block;
 height:100px;
 position:absolute;
 z-index:3;
 padding:25px;
 background-color:#1e1e1e;
<!-- padding-top:150px;-->
 font-size:11px;
 font-family:Arial, Helvetica, sans-serif;
}

#hover p {
 color:#fff;
 font-weight:normal;
}

JavaScript

$(document).ready(function() {
    var colour = $("#overlay");
    var content = $("#hover");
    content.hide();
    colour.hide();
    $("#container").hover(function() {
        content.show().css({
            "left": "-400px"
        }).animate({
            left: 0
        }, 300);
        colour.stop().fadeTo(500, .7);
    }, function() {
        content.animate({
            left: 400
        }, 300);
        colour.stop().fadeTo(500, 0);
    });
});