Polaroid Photo Gallery Experiment

Hover over photos for “lifting” effect

  • Photo

    Photo Caption

  • Photo

    #Winning

  • Photo

    Adonis DNA

  • Photo

    I got tiger blood

  • Photo

    I got one gear, GO

  • Photo

    Bi-Winning

  • Photo

    Win here, win there

  • Photo

    Win everywhere

HTML

<ul class="polaroids">
	<li>
		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>Photo Caption</h4>
	</li>
	<li>
		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>#Winning</h4>
	</li>
	<li>
		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>Adonis DNA</h4>
	</li>
	<li>		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>I got tiger blood</h4>
	</li>
	<li>		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>I got one gear, GO</h4>
	</li>
	<li>		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>Bi-Winning</h4>
	</li>
	<li>		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>Win here, win there</h4>
	</li>
	<li>		<div class="photo"><img src="http://placesheen.com/200/150" alt="Photo" /><div class="shadow"></div></div>
		<h4>Win everywhere</h4>
	</li>
</ul>
<div class="clear clearfix"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo);

#example {
	background: -webkit-linear-gradient(60deg, #AAA, #EEE);
	background: -moz-linear-gradient(60deg, #AAA, #EEE);
	background: linear-gradient(60deg, #AAA, #EEE);
}

.polaroids {
	margin: 20px auto;
	padding: 0;
	list-style-type: none;
	max-width: 960px;
	padding: 20px;
	-webkit-backface-visibility: hidden;
}

.polaroids li {
	float: left;
	width: 200px;
	margin: 10px 0px;
	padding: 15px;
	background: #FFF;
	border: 1px solid #FFF;
	border-radius: 3px;
	position: relative;
	z-index: 1;
	background: -webkit-linear-gradient(75deg, #f0f0f0, #FFF);
	background: -moz-linear-gradient(75deg, #f0f0f0, #FFF);
	background: linear-gradient(75deg, #f0f0f0, #FFF);
	-webkit-box-shadow: 3px 5px 15px rgba(0,0,0,0.25);
	-moz-box-shadow: 3px 5px 15px rgba(0,0,0,0.25);
	box-shadow: 3px 5px 15px rgba(0,0,0,0.25);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

	/* Rotations to make photos appear "randomly" scattered */
	.polaroids li:nth-child(1n) {
		-webkit-transform: rotate(-8deg);
		-moz-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}

	.polaroids li:nth-child(2n) {
		-webkit-transform: rotate(7deg);
		-moz-transform: rotate(7deg);
		transform: rotate(7deg);
	}
	
	.polaroids li:nth-child(3n) {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	
	.polaroids li:nth-child(4n) {
		-webkit-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		transform: rotate(5deg);
	}
	
	.polaroids li:nth-child(5n) {
		-webkit-transform: rotate(-6deg);
		-moz-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}
	
	.polaroids li:nth-child(5n) {
		-webkit-transform: rotate(7deg);
		-moz-transform: rotate(7deg);
		transform: rotate(7deg);
	}
	
	.polaroids li:hover {
		z-index: 10;
		-webkit-transform: rotate(0) scale(1.3);
		-moz-transform: rotate(0) scale(1.3);
		transform: rotate(0) scale(1.3);
		-webkit-box-shadow: 3px 10px 15px rgba(0,0,0,0.35);
		-moz-box-shadow: 3px 10px 15px rgba(0,0,0,0.35);
		box-shadow: 3px 10px 15px rgba(0,0,0,0.35);
	}
	
	.polaroids li:hover .shadow {
		background: none;
	}

.polaroids .photo {
	width: 200px;
	height: 150px;
	overflow: hidden;
	border-radius: 2px;
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
}

.polaroids .photo img {
	width: 100%;
	position: relative;
	z-index: 1;
}

.polaroids .photo .shadow {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 200px;
	height: 150px;
	-webkit-box-shadow: 2px 2px 1px rgba(0,0,0,0.5) inset;
	-moz-box-shadow: 2px 2px 1px rgba(0,0,0,0.5) inset;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.5) inset;
	background: -webkit-linear-gradient(75deg, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
	background: -moz-linear-gradient(75deg, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
	background: linear-gradient(75deg, rgba(255,255,255,0.0), rgba(255,255,255,0.1));
}

.polaroids h4 {
	font-family: 'Swanky and Moo Moo', cursive;
	margin: 0;
	font-size: 20px;
	font-weight: normal;
}