Skip to content

CSS3: Polaroid effect with simple animation

May 16, 2011

Sometimes photos looks much more better when they are displayed in Polaroid effect. Earlier, this effect is accomplished using photo editors such as Photoshop, corel draw etc. But now, using some simple CSS3 properties, you can create a realistic polaroid effect. This section explains you, to create a polaroid effect using CSS3 and a polaroid photo gallery with a simple animation without using javascript.

The important thing should be noted that this works best in recent version of Chrome, Safari, Mozilla and Opera.

HTML

<div class="foto_container"> 
	<ul> 
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p1.jpg" border="0" alt="image_one" width="250" /></li> 
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p5.jpg" border="0" alt="image_five" width="250" /></li> 
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p2.jpg" border="0" alt="image_two" width="250" /></li> 

		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p3.jpg" border="0" alt="image_three" width="250" /></li> 
		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p4.jpg" border="0" alt="image_four" width="250" /></li> 
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p8.jpg" border="0" alt="image_six" width="250" /></li> 

		<li class="trans_-5"><img src="http://www.aravindms.com/images/cody/p6.jpg" border="0" alt="image_five" width="250" /></li> 
		<li class="trans_5"><img src="http://www.aravindms.com/images/cody/p7.jpg" border="0" alt="image_six" width="250" /></li> 
	</ul> 
</div>

The above code uses unordered list to create the polaroid effect. The ‘li’ holds the images, which is to be converted to polaroid photo.

CSS

.foto_container
{
	float:left;
	clear:both;
	width:978px;
}

.foto_container ul
{
	list-style:none;
}

.foto_container ul li
{
	display:inline;
	float:left;
	margin:25px 23px;
	height:190px;
	cursor:pointer;
	
	border:15px solid #F3F3F3;
	padding-bottom:60px;
	background:#F3F3F3;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	
	-moz-box-shadow: 2px 3px 10px #131313;
	-webkit-box-shadow: 2px 3px 10px #131313;
	-o-box-shadow: 2px 3px 10px #131313;
}

.foto_container ul li img
{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.foto_container ul li.trans_-5
{
	-webkit-transform:rotate(-5deg);
	-webkit-transition: -webkit-transform .15s linear;
	
	-moz-transform:rotate(-5deg);
	-moz-transition: -moz-transform .15s linear;
	
	-o-transform:rotate(-5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_5
{
	-webkit-transform:rotate(5deg);
	-webkit-transition: -webkit-transform .15s linear;
	
	-moz-transform:rotate(5deg);
	-moz-transition: -moz-transform .15s linear;
	
	-o-transform:rotate(5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_-5:hover
{
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);
	
	-moz-box-shadow: 6px 8px 10px #131313;
	-webkit-box-shadow: 6px 8px 10px #131313;
	-o-box-shadow: 6px 8px 10px #131313;
}

.foto_container ul li.trans_5:hover
{
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);
	
	-moz-box-shadow: -6px 8px 10px #131313;
	-webkit-box-shadow: -6px 8px 10px #131313;
	-o-box-shadow: -6px 8px 10px #131313;
}

The below css code creates polaroid effect for the photos,

.foto_container ul li
{
	display:inline;
	float:left;
	margin:25px 23px;
	height:190px;
	cursor:pointer;

	border:15px solid #F3F3F3;
	padding-bottom:60px;
	background:#F3F3F3;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow: 2px 3px 10px #131313;
	-webkit-box-shadow: 2px 3px 10px #131313;
	-o-box-shadow: 2px 3px 10px #131313;
}

I have used two different classes for ‘li’, they are ‘trans_-5’ and ‘trans_5’. The ‘trans_-5’ is rotated to -5deg, whereas the ‘trans_5’ is rotated to 5deg. We need to set the transition property to the transform and the transition duration to .15s, so that on mouse over the polaroid photo roates back to 0deg and scales to 1.15 with an animation.

.foto_container ul li.trans_-5
{
	-webkit-transform:rotate(-5deg);
	-webkit-transition: -webkit-transform .15s linear; //property, duration and timing fucntion

	-moz-transform:rotate(-5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(-5deg);
	-o-transition: -o-transform .15s linear;
}

.foto_container ul li.trans_5
{
	-webkit-transform:rotate(5deg);
	-webkit-transition: -webkit-transform .15s linear;

	-moz-transform:rotate(5deg);
	-moz-transition: -moz-transform .15s linear;

	-o-transform:rotate(5deg);
	-o-transition: -o-transform .15s linear;
}

Thats all folks! You have created a realistic polaroid photo effect only with CSS3.

Advertisements

From → CSS3

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: