JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box">
        <div class="box-inner">
            <p class="img"><img src="http://img6.imagebanana.com/img/9l2hryir/1345888965_ktip.png" /></p>
            <div class="text">
                <p class="title">Yes, a title</p>
                <p class="desc">And a description</p>
            </div>
        </div>
    </div>
    <div class="box small">
        <div class="box-inner">
            <p class="img"><img src="http://img6.imagebanana.com/img/ul3tm15z/1345888970_gnomestockabout.png" /></p>
            <div class="text">
                <p class="title">Another title</p>
                <p class="desc">Descriptive stuff</p>
            </div>
        </div>
    </div>
</div>

<div class="bottom">
    Something below.
</div>

CSS

* { margin:0px;padding:0px;}
#container {
    background: floralwhite;
}

.box {
    width: 70%;
    float: left;
    overflow: hidden;
    margin: 10px 0;
}

.box > .box-inner {
    background-color: lightblue;
    position: relative;
    margin: 0 10px;
}

.box .img {
    text-align: center;
    position: relative;
    top: 0px;
}

.box.small {
    width: 30%;
}
.box.small > .box-inner {
    background-color: coral;
}

.text {
    background-color: rgba(1,1,1,0.2);
    text-align: center;
    height: 30px;
    overflow:hidden;
    line-height:30px;
    position: absolute;
    left:0px; bottom:0px;width:100%;
}

.text > .title {
    font-size: 1.4em;
}

.text > .desc {
    display: block;
    line-height: 22px;
}

.bottom {
    clear: both;
    background-color: gold;
    text-align: center;
    font-size: 2em;
}

JavaScript

jQuery(function() {
    $('.box').hover(function() {
        var _tst = this;
        jQuery(this).find(".text").animate({
            "height": jQuery(_tst).find(".text").height() + jQuery(_tst).find(".desc").height()
        }, {
            duration: 600,
            queue: false
        });
        jQuery(this).find(".img").animate({
            "top": -jQuery(_tst).find(".desc").height()
        }, {
            duration: 600,
            queue: false
        });
    }, function() {
        jQuery(this).find(".text").animate({
            "height": "30px"
        }, {
            duration: 600,
            queue: false
        });
        jQuery(this).find(".img").animate({
            "top": 0
        }, {
            duration: 600,
            queue: false
        });
    });

});