CSS Perspective Portfolio - Complex

by lovromar

HTML

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>

<header>
    <h1>Perspective Portfolio</h1>
</header>

<section class="gallery">

    <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>
    
</section>

<section class="small-gallery gallery">

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

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%),
                      -webkit-linear-gradient(hsla(0,0%,0%,.2) 0%, hsla(0,0%,100%,0) 100%);
    background-position: 50% 50%, 50% 50%, 50% 0%;
    background-repeat: repeat, repeat, no-repeat;
    background-size: 20px 20px, 10px 10px, 100% 25px;
    left: -10px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    width: 960px;
}

/* Header */

header {
    background-color: #c4453c;
    background-image: -webkit-radial-gradient(hsla(0,0%,0%,.025) 10%, transparent 15%),
                      -webkit-linear-gradient(hsla(0,0%,0%,.2) 0%, hsla(0,0%,100%,0) 100%);
    background-position: 50% 5px, 50% 0%;
    background-repeat: repeat, no-repeat;
    background-size: 10px 10px, 100% 25px;
    height: 120px;
    margin: 0 0 70px 20px;
    padding-top: 70px;
    position: relative;
    width: 940px;
}
header:after {
    background-image: -webkit-linear-gradient(45deg, #c4453c 25%, transparent 25%, transparent 75%, #c4453c 75%, #c4453c), 
                      -webkit-linear-gradient(-45deg, #c4453c 25%, transparent 25%, transparent 75%, #c4453c 75%, #c4453c);
    background-position: 50% 0;
    background-repeat: repeat-x;
    background-size: 10px 10px;
    bottom: -5px;
    content: '';
    height: 5px;
    left: 0;
    position: absolute; /* Make sure the parent element has a position set */
    right: 0;
}
h1 {
    color: #333;
    font: 75px/80px Abel, sans-serif;
    text-align: center;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
}

/* Gallery */

.gallery figure {
    float: left;
    height: 200px;
    margin: 0 0 20px 20px;
    padding: 0;
    position: relative;
    -webkit-perspective: 1000;
    -webkit-transition: all 1s ease;
}
.gallery a {
   ...

JavaScript

// Purely experimental at this stage. Degrades terribly, not sure about usability and having problems with the use of positioning when hovering.