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.
Click on the above image to view the demo.
This is done with only CSS and no Javascript, with no actual text used on the images. It works on a grid of linked images that can 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);
}
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.
0
510
