<div class="container">
<img class="center" src="...">
<img class="left" src="...">
<img class="right" src="...">
</div>
.container {
display: flex;
}
.center {
order: 2;
}
.left {
order: 1;
visibility: hidden;
}
.right {
order: 3;
visibility: hidden;
}
.center:hover ~ .left,
.center:hover ~ .right {
visibility: visible;
}
<style>
.img1{
width:100px;
height:80px;
background-color:#494949;
border-radius:20px;
}
.img{
width:0px;
height:0px;
opacity:0;
}
.img1:hover + .img{
opacity:1;
width:100px;
height:80px;
background-color:#494949;
border-radius:20px;
margin:
}
</style>
<img class="img1" src="#"/>
<img class="img" src="#"/>
<img class="img" src="#"/>