Figcaption animé

HTML

<figure>
    <img height="300px" src="http://film-english.com/wp-content/uploads/2013/04/the-image-conference-poster-high.jpg" alt="" />
    <figcaption lang="la">Lorem ipsum dolor sit amet…</figcaption>
</figure>

<figure>
    <img height="300px" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSNwslNZrsaufkyd5ONSJkeHU-ngkW6kv6slLttDK3F6HNH648M" alt="" />
    <figcaption lang="la">Lorem ipsum dolor sit amet…</figcaption>
</figure>

CSS

figure
{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
figure img
{
    display: block;
}
figcaption
{
    position: absolute;
    bottom: -6em;
    left: 0;
    background-color: #fff;
    color: #000;
    width: 94%;
    padding: 0.5em 3%;
    opacity: 0.85;
         -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;
}