<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="new_file.css">
</head>
<body>
<div class="accordion">
<div class="role">
<img src="https://uploadstatic.mihoyo.com/contentweb/20210720/2021072011090118454.png" >
<p>绫华</p>
</div>
<div class="role">
<img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/037d6fa79d3066c5bc8711187ad2f673_9069084469193280544.png" >
<p>绫人</p>
</div>
<div class="role">
<img src="https://uploadstatic.mihoyo.com/contentweb/20220208/2022020814003845991.png" >
<p>神子</p>
</div>
<div class="role">
<img src="https://webstatic.mihoyo.com/upload/contentweb/2022/07/04/44e2d916d9c13bca863d56423004fd98_5259521148631074871.png" >
<p>万叶</p>
</div>
<div class="role">
<img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/593e6a6d5d8836ca2ab5c27a98593e58_7195951238560837785.png" >
<p>宵宫</p>
</div>
<div class="role">
<img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/8ca5953fb331d71bc880496f5e8b7745_6228630778438562406.png" >
<p>心海</p>
</div>
<div class="role">
<img src="https://uploadstatic.mihoyo.com/contentweb/20211130/2021113011275854973.png" >
<p>一斗</p>
</div>
<div class="role">
<img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/fdcbc9ef8859b7077d92ae38d925e15e_7767077963502328666.png" >
<p>影</p>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background-color: mediumpurple;
display: flex;
justify-content: center;
align-items: center;
}
.accordion{
width: 80%;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.role{
flex: 1;
background-color: white;
overflow: hidden;
box-shadow: 1px 1px 20px 0px;
margin: 10px;
transition: all 0.5s;
}
.role img{
width: 100%;
height: 500px;
object-fit: cover;
display: inline-block;
}
p{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.role:hover{
flex: 8;
}