Perspective Portfolio v2

HTML

<style>

figure {
    float: left;
    height: 6em;
    margin: 1.5em;
    width: 12em;
    -webkit-transform: perspective(500);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .5s;
}
figure:hover {
    -webkit-transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);
}

figure:hover img {
    box-shadow: none;
}
figcaption {
    background-color: #222;
    color: #fff;
    padding: 1.5em;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 100% 0;
    -webkit-transition: .5s;
}
figure:hover figcaption {
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
}
h3 {
    font-weight: bold;
}
</style>


<figure>
    <img src="http://lorempixel.com/192/96/sports/1" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/2" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/3" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/4" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/5" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/6" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/7" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://lorempixel.com/192/96/sports/8"...