#photo{
	width: 750px;
	margin: 20px auto;
}

#photo ul{
	 list-style: none;
}

#photo li{
	float:left;
}



/*Bydefault,wetiltallourimages-degrees*/
#photo li{
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
}

/*Rotateallevenimagesdegrees*/
#photo li:nth-child(even){
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
}

/*Don'trotateeverythirdimage,butoffsetitsposition*/
#photo li:nth-child(3n){
-webkit-transform:none;
-moz-transform:none;
position:relative;
top:-5px;
}

/*Rotateeveryfifthimageby5degreesandoffsetit*/
#photo li:nth-child(5n){
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
right:5px;
}

/*Keepdefaultrotateforeveryeighth,butoffsetit*/
#photo li:nth-child(8n){
position:relative;
top:8px;
right:5px;
}

/*Keepdefaultrotateforeveryeleventh,butoffsetit*/
#photo li:nth-child(n){
position:relative;
top:3px;
left:-5px;
}

#photo ul li a img{
	border: 10px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
		  margin: 10px 7px;
		  z-index: 1;
}


@-webkit-keyframes hoverSpread {
    0% {-webkit-transform:scale(1);opacity: 0.7;}
    100% {-webkit-transform:scale(2);opacity: 1;}
}

#photo ul li a:hover img{
    -webkit-animation-name: hoverSpread;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: scale(2);
    opacity: 1;
    z-index: 5;
}