.gallery {
  --g: 1px; /* the gap */
  margin: 0 auto;
  padding-bottom: 20px;
  display: grid;
  clip-path: inset(1px); /* to avoid visual glitchs */
}
.gallery > img {
  --_p: calc(-1*var(--g));
  grid-area: 1/2;
  width: 100%; /* control the size */
  aspect-ratio: 2;
  cursor: pointer;
  transition: .4s .1s;
}
.gallery > img:first-child {
  clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)))
}
.gallery > img:last-child {
  clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)
}
.gallery:hover > img:last-child,
.gallery:hover > img:first-child:hover{
  --_p: calc(80% - var(--g));
}
.gallery:hover > img:first-child,
.gallery:hover > img:first-child:hover + img{
  --_p: calc(-80% - var(--g));
}