CSS Perspective Portfolio

by secretgspot

HTML

<figure>
    <a href="#">
        <img src="http://lorempixum.com/460/200" alt="">
        <figcaption>
            <h3>Title</h3>
            <p>This is where the information about the portfolio piece would go. This information would most likely span multiple lines.</p>
        </figcaption>
    </a>
</figure>

<figure>
    <a href="#">
        <img src="http://lorempixum.com/460/200/sports" alt="">
        <figcaption>
            <h3>Title</h3>
            <p>This is where the information about the portfolio piece would go. This information would most likely span multiple lines. This information would most likely span multiple lines.</p>
        </figcaption>
    </a>
</figure>

<figure>
    <a href="#">
        <img src="http://lorempixum.com/460/200/food" alt="">
        <figcaption>
            <h3>Title</h3>
            <p>This is where the information about the portfolio piece would go. This information would most likely span multiple lines. This information would most likely span multiple lines. This information would most likely span multiple lines.</p>
        </figcaption>
    </a>
</figure>

<figure>
    <a href="#">
        <img src="http://lorempixum.com/460/200/animals" alt="">
        <figcaption>
            <h3>Title</h3>
            <p>This is where the information about the portfolio piece would go.</p>
        </figcaption>
    </a>
</figure>

CSS

body {
    background: #e6e6e6 url(http://noisepng.com/100-90-5-monochrome.png) 0 0 repeat;
    left: -10px;
    margin: 50px auto;
    padding: 50px;
    position: relative;
    width: 960px;
}
figure {
    float: left;
    height: 200px;
    margin: 0 0 20px 20px;
    padding: 0;
    position: relative;
    -webkit-perspective: 1000;
    -webkit-transition: all 1s ease;
}
a {
    text-decoration: none;
}
img {
    background: #000;
    display: block;
    height: 200px;
    width: 460px;
    -webkit-box-shadow: 0 15px 20px -10px hsla(0,0%,0%,.5);
    -webkit-transform: rotateX(0deg);
    -webkit-transform-origin: 50% 100%;
    -webkit-transition: all 1s ease;
}
figcaption {
    background: black;
    color: white;
    display: block;
    margin: 0;
    padding: 10px;
    position: relative;
    width: 440px;
    z-index: -1;
    -webkit-box-shadow: 0 0 0 0 hsla(0,0%,0%,0);
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0%;
    -webkit-transition: all 1s ease;
}
h3 {
    font: bold 1.25em/1 sans-serif;
    margin-bottom: 1em;
}
figure:hover {
    top: -150px;
}
figure:hover img {
    -webkit-box-shadow: 0 0 0 0 hsla(0,0%,0%,0);
    -webkit-transform: rotateX(90deg);
}
figure:hover figcaption {
    -webkit-box-shadow: 0 30px 15px -20px hsla(0,0%,0%,.5);
    -webkit-transform: rotateX(0deg);
}