Mouse over to achieve excessive photo wall effect
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box {
position: relative;
width:1350px;
height:450px;
background: #999;
margin: 0 auto;
}
.box1 {
top: 90px;
left: 53px;
}
.img {
width: 120px;
height: 120px;
margin: 0 auto;
}
.box1 img {
width: 100%;
height: 100%;
}
.box1 span {
display: block;
font-weight: 700;
text-align: center;
margin-top: 10px;
}
.box1,.box3,.box4 {
transition: all .5s;
position: absolute;
transform: rotate(30deg);
width:130px;
height:180px;
background-color: #fff;
}
.box3 {
top: 90px;
left:530px;
}
.box2 {
top: 70px;
left:275px;
}
.box2,.box5 {
transition: all .6s;
position: absolute;
transform: rotate(-30deg);
width: 140px;
height: 190px;
background-color: #fff;
}
.box4 {
transform: rotate(-30deg);
top: 90px;
left: 800px;
}
.box5 {
top: 70px;
left:1130px;
transform: rotate(30deg);
}
.box2 span {
display: block;
font-weight: 700;
margin-top: 10px;
text-align: center;
}
.box2 .img {
width: 130px;
height: 130px;
margin: 0 auto;
}
.box2 img {
width: 100%;
height: 100%;
}
.box1:hover {
transform: rotate(0deg) scale(1.5);
}
.box2:hover {
transform: rotate(0deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box">
<!-- 过度属性transition
属性值：1.加过度的css样式
2.过度完成时间
3.速度曲线
4.过度延迟 -->
<div class="box1">
<div class="img">
<img src="./images/1.jpg">
</div>
<span>刘德华</span>
</div>
<div class="box2 box1">
<div class="img">
<img src="./images/3.jpg">
</div>
<span>刘德华</span>
</div>
<div class="box3 box1">
<div class="img">
<img src="./images/2.jpg">
</div>
<span>刘德华</span>
</div>
<div class="box4 box1">
<div class="img">
<img src="./images/4.jpg">
</div>
<span>刘德华</span>
</div>
<div class="box5 box2">
<div class="img">
<img src="./images/3.jpg">
</div>
<span>刘德华</span>
</div>
</div>
</body>
</html>