.gallery {
  --s: 50px; /* control the skewing */
  
  display: flex;
  gap: 10px;
  margin: 10px; 
}
.gallery > img {
  flex: 1;
  min-width: 0;
  height: 300px;
  object-fit: cover;
  clip-path: polygon(var(--_s,var(--s)) 0,100% 0,calc(100% - var(--_e,var(--s))) 100%,0 100%);
  margin-right: calc(-1*var(--s));
  cursor: pointer;
  transition: .3s linear;
}
.gallery > img:hover {
  flex: 1.6;
}
.gallery > img:is(:first-child,:hover),
.gallery > img:hover + * {
  --_s: 0%;
}
.gallery > img:is(:last-child,:hover),
.gallery > img:has(+ :hover) {
  --_e: 0%;
  margin-right: 0;
}

body {
  background-color:
}