<html>
<head>
<style type="text/css">
.picture-wall-container{
position: relative;
margin:35px 15px 20px 20px;
}
.picture-container{
position: absolute;
padding:5px;
background-color:white;
box-shadow: gray 1px 1px 1px;
transition: transform 0.3s;
}
#picture-container-1{
left:930px;
top:270px;
z-index: 1;
transform: rotate(13deg);
}
#picture-container-1:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-2{
left:190px;
top:170px;
z-index: 2;
transform: rotate(-5deg);
}
#picture-container-2:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-3{
left:840px;
top:260px;
z-index: 3;
transform: rotate(5deg);
}
#picture-container-3:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-4{
left:600px;
top:280px;
z-index: 1;
transform: rotate(-5deg);
}
#picture-container-4:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-5{
left:343px;
top:250px;
z-index: 3;
transform: rotate(3deg);
}
#picture-container-5:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-6{
left:0px;
top:300px;
z-index: 1;
transform: rotate(-5deg);
}
#picture-container-6:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-7{
left:940px;
top:62px;
z-index: 3;
transform: rotate(-10deg);
}
#picture-container-7:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-8{
left:612px;
top:29px;
z-index: 2;
transform: rotate(8deg);
}
#picture-container-8:hover{
z-index:4;
transform:rotate(0deg);
}
#picture-container-9{
left:0px;
top:0px;
z-index: 1;
transform: rotate(5deg);
}
#picture-container-9:hover{
z-index: 4;
transform:rotate(0deg);
}
#picture-container-10{
left:360px;
top:41px;
z-index: 2;
transform: rotate(-5deg);
}
#picture-container-10:hover{
z-index:4;
transform:rotate(0deg);
}
</style>
</head>
<body>
<div class="picture-wall-container">
<ul>
<li class="picture-container" id="picture-container-1"><img src="imgs/1.png" /></li>
<li class="picture-container" id="picture-container-2"><img src="imgs/2.png" /></li>
<li class="picture-container" id="picture-container-3"><img src="imgs/3.png" /></li>
<li class="picture-container" id="picture-container-4"><img src="imgs/4.png" /></li>
<li class="picture-container" id="picture-container-5"><img src="imgs/5.png" /></li>
<li class="picture-container" id="picture-container-6"><img src="imgs/6.png" /></li>
<li class="picture-container" id="picture-container-7"><img src="imgs/7.png" /></li>
<li class="picture-container" id="picture-container-8"><img src="imgs/8.png" /></li>
<li class="picture-container" id="picture-container-9"><img src="imgs/9.png" /></li>
<li class="picture-container" id="picture-container-10"><img src="imgs/10.png" /></li>
</ul>
</div>
</body>
</html>