Figcaption animé

HTML

<div class="figure">
    <img src="http://dummyimage.com/300/DEDEDE&text=image" alt="" />
    <div class="figcaption" lang="la">Lorem ipsum dolor sit amet… </div>
</div>

CSS

.figure
{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.figure img
{
    display: block;
}
.figcaption
{
    position: absolute;
    bottom: -6em;
    left: 0;
    background-color: #000;
    color: #FFF;
    width: 94%;
    padding: 0.5em 3%;
    opacity: 0.5;
         -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
       -moz-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
            transition: all 300ms linear;
}
.figure:hover .figcaption
{
    bottom: 0;
}