<div class="accordeon">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
*{box-sizing:border-box}
.accordeon {
margin: 2rem auto;
display: flex;
height: 400px;
max-width: 600px
}
.accordeon div {
flex-grow: 1;
transition: flex .5s
}
.accordeon div:hover {
flex-grow:10
}
.accordeon div:first-child{
background:url(image.jpg) no-repeat center center;
background-size: cover
}
.accordeon div:nth-child(2){
background:url(image.jpg) no-repeat center center;
background-size: cover
}
.accordeon div:nth-child(3){
background:url(image.jpg) no-repeat center center;
background-size: cover
}
.accordeon div:nth-child(4){
background:url(image.jpg) no-repeat center center;
background-size: cover
}
.accordeon div:last-child{
background:url(image.jpg) no-repeat center center;
background-size: cover
}