<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WindowShades</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: url(../img/wbg.png);
}
.box{
width: 800px;
height: 360px;
margin: 200px auto;
/*溢出部分隱藏*/
overflow: hidden;
}
.box img{
width: 640px;
height: 360px;
}
li{
list-style: none;
width: 155px;
height: 360px;
float: left;
border-left: 5px solid white;
box-shadow: -5px 0px 10px black;
transition: all 0.5s linear;
}
/*鼠標懸浮在ul上，讓ul變小*/
.box ul:hover li{
width: 35px;
}
/*鼠標懸浮到某個li上，讓li變大*/
.box ul li:hover{
width: 635px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./../../正面.jpg" ></li>
<li><img src="./../../反面.jpg" ></li>
<li><img src="./../../xuanjiezhimou.jpg" ></li>
<li><img src="./../../碼上說故事_690.jpeg" ></li>
<li><img src="./../../1.jpg" ></li>
</ul>
</div>
</body>
</html>
資料來源：https://blog.csdn.net/qq_41866776/article/details/96695938