HTML file
<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSSZ Photo Wall </title>
<link rel= "stylesheet" href= "Style.css" type= "Text/css" >
<body>
<div class = "Container" >
</div>
</body>
CSS file:
H1{text-align:center;}
Body{background: #eee;}
. container{
width:960px;
height:450px;
margin:60px Auto;
position:relative;
}
img{
padding:10px 10px 15px 10px;
border:1px solid #ccc;
Background: #fff;
Position:absolute;
width:150px;
-webkit-transition:1s;
-moz-transition:1s;
Transition:1s;
}
img:hover{
-webkit-transform:rotate (0DEG);
-moz-transform:rotate (0DEG);
Transform:rotate (0DEG);
-webkit-transform:scale (1.2);
-moz-transform: (1.2);
Transform:scale (1.2);
Z-index:2;
box-shadow:10px 10px 15px #ccc;
}
. pic1{
top:2px;
left:10px;
Z-index:1;
-webkit-transform:rotate ( -10DEG);
-moz-transform:rotate ( -10DEG);
Transform:rotate ( -10DEG);
}
. pic2{
top:25px;
left:170px;
Z-index:1;
-webkit-transform:rotate (20DEG);
-moz-transform:rotate (20DEG);
Transform:rotate (20DEG);
}
. pic3{
top:30px;
left:300px;
Z-index:1;
-webkit-transform:rotate ( -15DEG);
-moz-transform:rotate ( -15DEG);
Transform:rotate ( -15DEG);
}
. pic4{
top:17px;
left:450px;
Z-index:1;
-webkit-transform:rotate (8DEG);
-moz-transform:rotate (8DEG);
Transform:rotate (8DEG);
}
. pic5{
top:30px;
left:600px;
Z-index:1;
-webkit-transform:rotate (2DEG);
-moz-transform:rotate (2DEG);
Transform:rotate (2DEG);
}
. pic6{
bottom:40px;
left:50px;
Z-index:1;
-webkit-transform:rotate ( -7DEG);
-moz-transform:rotate ( -7DEG);
Transform:rotate ( -7DEG);
}
. pic7{
bottom:10px;
left:200px;
Z-index:1;
-webkit-transform:rotate (10DEG);
-moz-transform:rotate (10DEG);
Transform:rotate (10DEG);
}
. pic8{
bottom:10px;
left:350px;
Z-index:1;
-webkit-transform:rotate (20DEG);
-moz-transform:rotate (20DEG);
Transform:rotate (20DEG);
}
. pic9{
bottom:10px;
left:600px;
Z-index:1;
-webkit-transform:rotate ( -5DEG);
-moz-transform:rotate ( -5DEG);
Transform:rotate ( -5DEG);
}
HTML+CSS Photo Wall