Hide images behind other image

hello i need to hide other images behind middle image but i cannot figure it out how.

this is what is happening https://streamable.com/yswmbs

code

index.html

<div class="images"> 
<a href="youtube.com"><img src="./Assets/1.jpg" class="one"></a> 
<a href=""><img src="./Assets/2.jpg" class="two"></a> 
<a href=""><img src="./Assets/3.jpg" class="three"></a> 
<a href=""><img src="./Assets/4.jpg" class="four"></a> 
<a href=""><img src="./Assets/5.jpg" class="five"></a> 
<a href=""><img src="./Assets/6.jpg" class="six"></a> 

style.css

.images{
margin-top: 50px;
width: 100%;
height: 150px !important;
transition-duration: .5s;
}
.images:hover{
width: 20%;
}
.images img{
margin: -10px;
}

PLS HELP