<div class="gallery">
  <img src="https://picsum.photos/id/582/400/400" alt="a wolf">
  <img src="https://picsum.photos/id/1074/400/400" alt="a lioness">
</div>

.gallery {
  --g: 8px; /* the gap */
  
  display: grid;
  clip-path: inset(1px); /* to avoid visual glitchs */
}
.gallery > img {
  --_p: calc(-1*var(--g));
  grid-area: 1/1;
  width: 350px; /* control the size */
  aspect-ratio: 1;
  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(50% - var(--g));
}
.gallery:hover > img:first-child,
.gallery:hover > img:first-child:hover + img{
  --_p: calc(-50% - var(--g));
}




body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #3FB8AF;
}