一个简单的前端手风琴图片滑动展示

最近做的一个项目正好要用到首页图片预览的手风琴效果，看了网上的教程，先学了一个，比较简单，基本上一看就会，话不多说上代码。

<style>
.wrap{
    overflow: hidden;
    float: left;
    width: 300px;
    height: 500px;
    transition: .5s;  //过渡效果
}
.container:hover .wrap{
    width: 200px;
}
.container .wrap:hover{
    width: 700px;
}
</style>

<div class="container" style="width: 1500px;height:800px;border:1px;">
<div class="wrap" style="background-color: aqua">1</div>
<div class="wrap" style="background-color: red">2</div>
<div class="wrap" style="background-color: yellow">3</div>
<div class="wrap" style="background-color: purple">4</div>
<div class="wrap" style="background-color: blue">5</div>
</div>