JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hoverInfo">
    <img class="imgInfo" src="http://i.imgur.com/fxGRWi0.jpg"/>
    <div class="imgTextInfo">
        <div class="what">
            <span class="title">Rihanna stuff</span>
            <span class="when">May 18, 2015</span>
        </div>
        <div class="description">
            <p>Hi there! This is just a random description. Click here to read more.</p>
        </div>
    </div>
</div>

CSS

.hoverInfo {
    position: relative;
    width: 400px;
    cursor:pointer;
    overflow: hidden;
    font-family: sans-serif;
}
.imgInfo {
    width: 400px;
}
.imgTextInfo {
    position: absolute;
    bottom: -30%;
    width: 100%;
    opacity: 0;
    
    background: rgba(0, 0, 0, 0.8);
    color: #fff;    
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.hoverInfo:hover .imgTextInfo {
    opacity: 1;
    bottom:0;
}

.what {padding: 5px 20px; border-bottom: 1px solid #fff;}
.when {float: right;}
.description {padding: 5px 20px;}
p {font-size: 13px;}