<style>
ul,li{margin:0;padding:0;}
ul{
display:flex;
margin:0 auto;
width:960px;
height:500px;
outline:1px solid black;
}
li{
width:160px;
height:500px;
outline:2px solid red;
list-style:none;
transition:all 1s;
overflow:hidden;
}
ul:hover li{
width:40px;
}
ul li:hover{
width:760px;
}
</style>
<ul>
<li><img src="https://www.cjw123.com/assets/banner/211202-2.jpg" /></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<pre>
设计思路：
1.有大盒子
2.盒子有6张图，列表
3.图片会动，分二种情况：
鼠标放在li的宽度是760px，其他的是40px，再加延迟时间transition，使其丝滑
4.li中放图片，但图片尺寸过大，在li加overflow
5.删除外框
</pre>
