Create a Polaroid-like Image with CSS

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background with a caption underneath the images.

In this tutorial we are going to display images in a polaroid style using just CSS.

View the demo to see what we are going to create.

Demo

To start off we are going to create the html for the polaroid gallery, all we are going to do for this is display images wrapped in a anchor tag link.

The links will need a title attribute as we will use this as the text for the image caption.

<div class="polaroid-images">
	<a href="" title="Cave"><img height="200" src="images/water.jpg" alt="Cave" title="Cave" /></a>
	<a href="" title="Island"><img height="200" src="images/water2.jpg" alt="Island" title="Island" /></a>
	<a href="" title="Islands Forest"><img height="200" src="images/water3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
	<a href="" title="Decking"><img height="200" src="images/water4.jpg" alt="Decking" title="Decking" /></a>
	<a href="" title="Lake"><img height="200" src="images/water5.jpg" alt="Lake" title="Lake" /></a>
	<a href="" title="Mountains"><img height="200" src="images/water6.jpg" alt="Mountains" title="Mountains" /></a>
	<a href="" title="Forest"><img height="200" src="images/water7.jpg" alt="Forest" title="Forest" /></a>
	<a href="" title="Coast Valley"><img height="200" src="images/water8.jpg" alt="Coast Valley" title="Coast Valley" /></a>
</div>

For the polaroid image we are going to style the link wrapped around the image, this is so we can use the title attribute as the caption text at the bottom of the image. This is why we are going to style the anchor tag with the white background and padding to create the polaroid look.

At the bottom of the image we need the padding to be larger than the other sides as this is where we are going to place the caption text.

Add the below CSS to style your images like a polaroid picture.

.polaroid-images a
{
	background: white;
	display: inline;
	float: left;
	margin: 0 15px 30px;
	padding: 10px 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
	box-shadow: 0 4px 6px rgba(0,0,0,.3);
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	transition: all .15s linear;
	z-index:0;
}

At the moment there isn't a caption under the image, this is where we need to use the pseudo class :after to create a new element after the anchor tag. The benefit of doing this is that we can use the CSS property content to get the title attribute from the anchor tag.

Add the following to add the caption on to the image.

.polaroid-images a:after {
	color: #333;
	font-size: 20px;
	content: attr(title);
	position: relative;
	top:15px;
}

To make sure that the image will always fit the polaroid area, add the following line.

.polaroid-images img {
	display: block;
	width: inherit;
}

Rotate The Images

Just displaying images which look like a polaroid picture isn't enough, we need to add a bit more interaction to the images. We can make it look like the pictures have just been thrown down for you pick up. To make the images look like they have been thrown down we can rotate them slightly in a random order.

To create the random rotations we use the nth-child selector to go through all the images and rotate them differently depending on what order they are placed on the page.

.polaroid-images a:nth-child(2n)
{
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
	-webkit-transform: rotate(-24deg);
	-moz-transform: rotate(-24deg);
	transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
	-webkit-transform: rotate(14deg);
	-moz-transform: rotate(14deg);
	transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
	-webkit-transform: rotate(-18deg);
	-moz-transform: rotate(-18deg);
	transform: rotate(-18deg);
}

To create a picked up motion we can use the hover event of the mouse. As the images will be slightly rotated on the screen the hover event will scale the image and reset the rotation back to zero.

On the hover event we set the rotation back to 0, add a scale of 120% and add a box shadow to the box to make it look like it is moving away from the page.

.polaroid-images a:hover{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
        transform: rotate(0deg);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
        transform: scale(1.2);
	z-index:10;
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

That's all the CSS you need to create a polaroid image gallery.

View the demo to see how it turns out.

Demo