JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-4 frame">
        <div class="innerframe">
            <div class="description">
                <h3>Title</h3>
                <p>Description</p>
            </div>
        </div>        
    </div>
        <div class="col-xs-4 frame">
        <div class="innerframe">
            <div class="description">
                <h3>Title</h3>
                <p>Description</p>
            </div>
        </div>        
    </div>
    
</div>

CSS

.frame{
    padding-top:94px;
    height: 600px;
    text-align: right;
    border-radius: 15px;
    border: 3px solid rgba(245, 103, 0, 0.70);

    background-color:black;
    padding-left: 12px;
    padding-right: 12px;
    text-align: right;
    border-radius: 15px;
    background-repeat: no-repeat;
    height: 100%;
}

.innerframe{
    box-shadow:2px 2px 1px rgb(207, 38, 0);
    background-size:cover;
    height: 100%;
    width: 100%
}

.description {
    margin:0;
    padding:0;
    background-color: rgba(255,255,255,0.9);
    height: 33%;
    width: 100%;
    position: absolute;
    border-radius: 0px;
    bottom: 0px;
    display: none;
}

.ch1{}
.ch2{}

JavaScript

var timer;

$(document).ready(
    function(){
        $(".frame").hover(        
            function() {
                var descrip_in=$(".description",$(this))
                timer = setTimeout(function(){descrip_in.slideDown();}, 1000);
                                      
            },     
            function() {       
                var descrip_out=$(".description",$(this))
                clearTimeout(timer);
                descrip_out.slideUp(1000)
                
            }
        );    
    }
);