<div class="gallery">
  <img src="https://picsum.photos/id/433/600/400" alt="A Bear">
  <img src="https://picsum.photos/id/582/600/400" alt="A wolf">
  <img src="https://picsum.photos/id/1074/600/400" alt="A lioness">
  <img src="https://picsum.photos/id/237/600/400" alt="A Dog">
  <img src="https://picsum.photos/id/659/600/400" alt="A kind wolf">
  <img src="https://picsum.photos/id/593/600/400" alt="A Tiger">
</div>

.gallery {
  --s: 50px;
  
  display: grid;
  height: 350px;
  gap: 8px;
  grid-auto-flow: column;
  place-items: center;
}
.gallery > img {
  width: 0;
  height: 0;
  min-width: calc(100% + var(--s));
  min-height: 100%;
  object-fit: cover;
  cursor: pointer;
  clip-path: polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
  transition: .5s;
}
.gallery > img:hover {
  width: 15vw; 
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  background: #ECD078;
}