How to Create Polaroid Images with CSS3

How to Create Polaroid Images with CSS3

Create a Polaroid effect with your images using CSS3! Mark of Zurb.com teaches us how to do it in this uber-cool tutorial. The goals here are that it has to be done with only CSS and no Javascript, that there should be no actual text used on the images, it has to work on a grid of linked images, and that images must randomly switch, just like flipping through a stack of photos. You can use any images you want to set the groundwork.

CSS

    ul.polaroids a:after {

    content: attr(title);

    }          

CSS to randomly rotate the images

    /* By default, we tilt all our images -2 degrees */

    ul.polaroids a {

    -webkit-transform: rotate(-2deg);

    -moz-transform: rotate(-2deg);

    }

    

    /* Rotate all even images 2 degrees */

    ul.polaroids li:nth-child(even) a {

    -webkit-transform: rotate(2deg);

    -moz-transform: rotate(2deg);

    }

    

    /* Don't rotate every third image, but offset its position */

    ul.polaroids li:nth-child(3n) a {

    -webkit-transform: none;

    -moz-transform: none;

    position: relative;

    top: -5px;

    }

    

    /* Rotate every fifth image by 5 degrees and offset it */

    ul.polaroids li:nth-child(5n) a {

    -webkit-transform: rotate(5deg);

    -moz-transform: rotate(5deg);

    position: relative;

    right: 5px;

    }

    

    /* Keep default rotate for every eighth, but offset it */

    ul.polaroids li:nth-child(8n) a {

    position: relative;

    top: 8px;

    right: 5px;

    }

    

    /* Keep default rotate for every eleventh, but offset it */

    ul.polaroids li:nth-child(11n) a {

    position: relative;

    top: 3px;

    left: -5px;

    }

For the hover effect

    /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */

    ul.polaroids a:hover {

    -webkit-transform: scale(1.25);

    -moz-transform: scale(1.25);

    position: relative;

    z-index: 5;

    }

Final details

    /* Add drop shadows and smooth out the transition (Safari only) */

    ul.polaroids a {

    -webkit-transition: -webkit-transform .15s linear;

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

    }

    

    /* On hover, darken the shadows a bit */

    ul.polaroids a {

    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

    }

Check out the demo here: http://www.zurb.com/playground/css3-polaroids

Note: This requires Safari 4.x and Chrome 5 for you to see the full effect. If you use Firefox, the enlarging transition can’t be viewed. You can also check out on best web design site for more ...