CSS3 Photo Stack

I originally made this bit of code for Theatme, but I ended up not using it due to it not really fitting in with the UI as well as I would have liked. It’s not perfect, and the code could probably be a lot cleaner, but I’ve been messing around with this for weeks and I think it’s time for me to stop. Clicking on the “Next” button on the left will advance to the next image. Clicking on the frontmost photo will give you a larger view of it along with a caption if present. Photography is by the talented Nick Heer. Works only with webkit based browsers. If you do decide to use any of this code for your own use, please give proper credit with a link back to here.

jQuery

$(document).ready(function() {
    $('.photo:nth-child(7)').addClass('num4');
    $('.photo:nth-child(8)').addClass('num3');
    $('.photo:nth-child(9)').addClass('num2');
    $('.photo:nth-child(10)').addClass('num1');
    var count = 0;
    $('#nextbutton').click(function() {
        count++;
        $('.photo:nth-child(1)').addClass('num' + (-count + 10));
        $('.photo:nth-child(2)').addClass('num' + (-count + 9));
        $('.photo:nth-child(3)').addClass('num' + (-count + 8));
        $('.photo:nth-child(4)').addClass('num' + (-count + 7));
        $('.photo:nth-child(5)').addClass('num' + (-count + 6));
        $('.photo:nth-child(6)').addClass('num' + (-count + 5));
        $('.photo:nth-child(7)').addClass('num' + (-count + 4));
        $('.photo:nth-child(8)').addClass('num' + (-count + 3));
        $('.photo:nth-child(9)').addClass('num' + (-count + 2));
        $('.photo:nth-child(10)').addClass('num' + (-count + 1));
        if(count == 10) {
            $('#nextbutton').addClass('hidden');
            $('.photos').addClass('complete');
       }
    });
    $('.photo').click(function() {
        $(this).toggleClass('zoom');
        $('.photos').toggleClass('hidden');
        $('#nextbutton').toggleClass('hidden');
    });
});

body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d3d3d), color-stop(100%,#1c1c1c));
    -webkit-font-smoothing: antialiased;
}
 
.photos {
    position: relative;
    height: 525px;
    width: 350px;
    top: 50%;
    margin: -310px auto;
    z-index: 1;
    -webkit-perspective: 1000;
    -webkit-perspective-origin: 50% 20%;
}
 
.photos.complete:before,
.photos.complete:after {
    display: block;
}
 
.photos:after {
    position: absolute;
    height: 414px;
    width: 274px;
    top: 107px;
    left: 35px;
    border: 3px rgba(0,0,0,.3) dashed;
    display: block;
    border-radius: 15px;
    content: "";
    display: none;
}
 
.photos:before {
    position: absolute;
    height: 414px;
    width: 274px;
    top: 108px;
    left: 35px;
    border: 3px rgba(255,255,255,.05) dashed;
    display: block;
    content: "CSS3 Photo Stack";
    border-radius: 15px;
    line-height: 414px;
    color: rgba(0,0,0,.3);
    text-shadow: 0 1px 0 rgba(255,255,255,.05);
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    display: none;
}
 
.photo {
    height: 525px;
    width: 350px;
    position: absolute;
    top: 0;
    border: 1px solid rgba(0,0,0,.9);
    -webkit-transform-origin: 50% 100%;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    -webkit-transition: -webkit-transform .5s ease;
    -webkit-transition-delay: 0s;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: #aaa;
    -webkit-transform: rotateX(10deg) translateY(-16px) scale(.8);
    pointer-events: none;
    z-index: 2;
}
 
.photos.hidden .photo {
    -webkit-transform: rotateX(0deg) translateZ(-70px) scale(.8);
}
 
.zoom {
    -webkit-transform: rotateX(0deg) translateZ(0px) scale(1) translateY(50px) !important;
}
 
.photo:first-of-type {
    -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
 
.photo.num4 {
    -webkit-transform: rotateX(5deg) translateY(-11px) scale(.8);
}
 
.photo.num3 {
    -webkit-transform: rotateX(0deg) translateY(-6px) scale(.8);
}
 
.photo.num2 {
    -webkit-transform: rotateX(-6deg) translateY(-2.5px) scale(.8);
}
 
.photo.num1 {
    -webkit-transform: rotateX(-11deg) translateY(.2px) scale(.8);
    pointer-events: visible;
    cursor: pointer;
}
 
.photo.num1:after {
    content: "+";
    position: relative;
    margin: auto;
    line-height: 50px;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background: rgba(0,0,0,.75);
    display: block;
    top: 238px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 5px #000;
    font-family: Arial;
    text-align: center;
    opacity: 0;
}
 
.photo.num1:hover:after {
    opacity: 1;
}
 
.zoom:hover:after {
    content: "×" !important;
}
 
.zoom:before {
    content: attr(caption);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    font-size: 14px;
    line-height: 44px;
    font-weight: light;
    color: #222;
    background: rgba(255,255,255,.75);
    text-shadow: 0 1px 0 #fff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
    opacity: 1;
    padding: 10px;
}
 
.photo.num0 {
    -webkit-transition: -webkit-transform 1s ease-in;
    -webkit-transform: rotateX(-80deg) translateZ(300px) scale(.8) !important;
    pointer-events: none;
}
 
.photo li {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background: -webkit-gradient(linear,0% 0%,100% 67%,from(rgba(255,255,255,.8)),to(rgba(255,255,255,0)),color-stop(.5,rgba(255,255,255,.1)),color-stop(.5,rgba(255,255,255,.0))) no-repeat;
    pointer-events: none;
    border-radius: 0;
    -webkit-transition: -webkit-transform .5s ease;
    -webkit-transform: translateY(-15px);
}
 
.zoom li {
    -webkit-transform: translateY(0px) !important;
}
 
.photo.num4 li {
    -webkit-transform: translateY(-25px);
}
 
.photo.num3 li {
    -webkit-transform: translateY(-50px);
}
 
.photo.num2 li {
    -webkit-transform: translateY(-75px);
}
 
.photo.num1 li {
    -webkit-transform: translateY(-100px);
}
 
.photo.num0 li {
    -webkit-transform: translateY(-525px);
    -webkit-transition: -webkit-transform 1s ease-in;
}
 
#nextbutton {
    -webkit-appearance: none;
    border-radius: 5px;
    padding: 0;
    display: block;
    width: 100px;
    height: 30px !important;
    line-height: 30px;
    position: absolute;
    border: none;
    background: rgba(34, 35, 37, .97) -webkit-gradient(linear,100% 100%,100% 0%,from(rgba(255, 255, 255, .05)),to(rgba(255, 255, 255, .1)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(255, 255, 255, .02), 0 0 2px rgba(0, 0, 0, .6);
    top: 50%;
    left: 50%;
    margin: 225px 0 0 -50px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 1px #000;
    text-align: center;
    font-size: 14px;
    z-index: 0;
    cursor: pointer;
    -webkit-transition: .5s opacity ease;
    -webkit-font-smoothing: antialiased;
}
 
#nextbutton.hidden {
    opacity: 0;
    pointer-events: none;
}
 
#nextbutton:hover {
    background: rgba(34, 35, 37, .97) -webkit-gradient(linear,100% 100%,100% 0%,from(rgba(255, 255, 255, .1)),to(rgba(255, 255, 255, .2)));
}
 
#nextbutton:active{
    box-shadow: inset 0 -1px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);
    background: rgba(34, 35, 37, .1) -webkit-gradient(linear,100% 100%,100% 0%,from(rgba(255, 255, 255, .05)),to(rgba(255, 255, 255, .1)));
}

HTML

<body>
    <div class="photos">
        <div class="photo" style="background-image:url(10.jpg)" caption="Vivamus luctus laoreet magna, vel lobortis lorem fringilla vel."><li><li><div>
        <div class="photo" style="background-image:url(9.jpg)"><li><li><div>
        <div class="photo" style="background-image:url(8.jpg)"><li><li><div>
        <div class="photo" style="background-image:url(7.jpg)"><li><li><div>
        <div class="photo" style="background-image:url(6.jpg)"><li><li><div>
        <div class="photo" style="background-image:url(5.jpg)" caption="Nullam adipiscing sapien non mi mollis sit amet mattis magna semper."><li><li><div>
        <div class="photo" style="background-image:url(4.jpg)"><li><li><div>
        <div class="photo" style="background-image:url(3.jpg)" caption="The next photo will have no caption."><li><li><div>
        <div class="photo" style="background-image:url(2.jpg)" caption="Lorem ipsum."><li><li><div>
        <div class="photo" style="background-image:url(1.jpg)" caption="Hello World!"><li><li><div>
    <div>
    <button id="nextbutton">Next<button>
<body>

If you have any feedback or questions feel free to email me or mention me on twitter.