Stacked photo css only

css

.blocky_hold{
		height: 101px;
		width: 135px;
		position: relative;
		display: block;
}
.blocky{ border: 1px solid #fff;
	height: 101px;
	width: 135px;
	display: block;
	position: absolute;
	top: 0; left: 0;
	background: #fff;

	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), inset 0  0 21px rgba(0, 0, 0, 0.30);
	-moz-box-shadow:    0 2px 3px rgba(0, 0, 0, 0.35), inset 0 0 21px rgba(0, 0, 0, 0.30);
	box-shadow:         0 2px 3px rgba(0, 0, 0, 0.35), inset 0 0 21px rgba(0, 0, 0, 0.30);

	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	transition-duration: 0.4s;

	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;

 }


.pos1 {
	-webkit-transform:rotate(6deg);
	-moz-transform:rotate(6deg);
	-o-transform:rotate(6deg);
	margin-top: 1px;
}

.pos2 {
	margin-top: 1px;
	-webkit-transform:rotate(-16deg);
	-moz-transform:rotate(-16deg);
	-o-transform:rotate(-16deg);
}
.pos3 {
	display: none;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-o-transform:rotate(3deg);
}

.blocky_hold:hover .blocky {
	margin-top: 0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
 }

.blocky_hold:hover .main {
 	border-color:#f00;
 }

html

<span class="blocky_hold">

	<span class="blocky pos1">&nbsp;</span>
	<span class="blocky pos2">&nbsp;</span>
	<span class="blocky pos3">&nbsp;</span>

	<span class="blocky main">&nbsp;</span>
</span>