Figcaption animé

by htmlzengarden

HTML

<figure>
    <img src="http://dummyimage.com/300/DEDEDE&text=image" 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: #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;
}