Figure Demo

Demo for showing the use of figure element

by Aniket Pant

HTML

<figure>
    <img src="http://farm8.staticflickr.com/7002/6409110109_c587520f80_m.jpg" alt="Abstract Image" />
    <figcaption>Abstract Image</figcaption>
</figure>

CSS

/*
** Credits to http://www.flickr.com/photos/tedwinson/ for the image
*/
body {
    background: #000;
}
figure {
    width: 250px;
    background: #fff;
    margin: 20px auto;
    padding: 5px 5px 20px;
}
figure img {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 999;
    border: 5px solid transparent;
}
figure figcaption {
    position: relative;
    color: #222;
    font-variant: small-caps;
    font-family: serif;
    z-index: 1;
    top: -30px;
    text-align: center;
    -webkit-transition: top 250ms linear;
    -moz-transition: top 250ms linear;
    transition: top 250ms linear;
}
figure:hover figcaption {
    top: 0;
    -webkit-transition: top 300ms ease-in-out;
    -moz-transition: top 300ms ease-in-out;
    transition: top 300ms ease-in-out;
}