Perspective Portfolio v2

by Craig Haywood

HTML

<figure>
    <img src="https://zone12.secondsplash.com/bgs/abstract/13.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="https://zone12.secondsplash.com/bgs/abstract/13.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="https://zone12.secondsplash.com/bgs/abstract/13.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/bboard.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/beer.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/Bus_stop.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/sexy.jpg" alt="Portfolio Item">
    <figcaption>
        https://somanyhits.com/s/?r=1234567&i=22
        <p>Description.</p><p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/truck.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

<figure>
    <img src="http://a1-10525-so.ssl.cdn13.com/images/pilot.jpg" alt="Portfolio Item">
    <figcaption>
        <h3>Title</h3>
        <p>Description.</p>
    </figcaption>
</figure>

CSS

figure {

    float: left;
    height: 169px;
    margin: 1.5em;
    width: 300px;
    -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 10px 10px 5px hsla(0,0%,0%,.65);
    display: block;
    height: 100%;
    -webkit-transition: .5s;
}
figure:hover img {
    box-shadow: none;
    
}
figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
    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 10px 10px 5px hsla(0,0%,0%,.65);
}
h3 {
    font-weight: bold;
}