版权声明：进击的葱 https://blog.csdn.net/qlwangcong518/article/details/87256915
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
body { padding: 0; margin: 0; }
ul,li { padding: 0; margin: 0; list-style: none; }
#accordion { width: 805px; height: 320px; margin: 0 auto; position: relative; top: 100px; background: tomato; overflow: hidden;}
.accordion__item {
width: 160px; height: 320px; border-left: 1px solid #fff; float: left ;
transition: all 0.5s;
transition-timing-function: linear;
}
.accordion__item img { display: block; }
#accordion:hover .accordion__item { width: 40px; }
#accordion .accordion__item:hover { width: 640px; }
</style>
<body>
<section id="accordion">
<ul class="accordion__wrapper">
<li class="accordion__item"><img src="./images/img1.jpg" alt="" class="accordion__image"></li>
<li class="accordion__item"><img src="./images/img2.jpg" alt="" class="accordion__image"></li>
<li class="accordion__item"><img src="./images/img3.jpg" alt="" class="accordion__image"></li>
<li class="accordion__item"><img src="./images/img4.jpg" alt="" class="accordion__image"></li>
<li class="accordion__item"><img src="./images/img5.jpg" alt="" class="accordion__image"></li>
</ul>
</section>
</body>
</html>