JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <figure>
        <a href="#">
            <img src="http://goo.gl/cTvLty" alt="" />
        </a>
        <figcaption>
            <div>
                <a href="#">Fowl Behold Saw</a>
                <ul>	
                    <li>1056</li>
                    <li>58</li>
                    <li>12:23</li>
                </ul>	
            </div>
        </figcaption>
    </figure>
</div>

CSS

.wrap {
    overflow: hidden;
    display: inline-block;
}

figure {
    position: relative;
    overflow: hidden;
}

figcaption {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 70px;
    color: white;
}

figcaption div {
    position: relative;
    height: inherit;
}

figcaption a {
    font-size: 1.5em;
    color: inherit;
}

figcaption ul {
    position: absolute;
    bottom: -100px;
    transition: all 0.3s linear;
}

figcaption div:hover ul {
    bottom: 0px;
}

li {
    display: inline-block;
}