<body>
<div class="box">
<div>
<img src="./1.jpg" alt="">
</div>
<div>
<img src="./2.jpg" alt="">
</div>
<div>
<img src="./3.jpg" alt="">
</div>
<div>
<img src="./4.jpg" alt="">
</div>
<div>
<img src="./5.jpg" alt="">
</div>
</div>
</body>
<style>
.box{
height: 400px;
font-size: 0px;
}
.box>div{
width: 100px;
height: 400px;
display: inline-block;
overflow: hidden;
transition: all .4s;
}
img{
width: 500px;
height: 400px;
}
.box>div:hover{
width: 400px;
}
</style>