Perspective Portfolio v2

by secretgspot

HTML

<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" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

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

CSS

body {
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.015) 50%, hsla(0,0%,0%,.015) 100%),
                      -webkit-radial-gradient(hsla(0,0%,0%,.05) 10%, transparent 15%);
    background-size: 1.5em 1.5em, .5em .5em;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.5;
    margin: 0 auto;
    overflow: hidden;
    padding: 1.5em;
    width: 45em;
}
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);
}
img {
    background-color: #222;
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
    display: block;
    height: 100%;
    -webkit-transition: .5s;
}
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;
}