<div class="cards">
  <img src="https://assets.codepen.io/3/old-time-music-1.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-2.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-3.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-4.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-5.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-6.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-7.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-8.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-9.webp" alt="">
  <img src="https://assets.codepen.io/3/old-time-music-10.webp" alt="">
</div>

.cards {
  display: flex;
  transform-style: preserve-3d;
  transform: perspective(1200px);
  gap: 5px;

  > img {
    width: 150px;
    height: 300px;
    object-fit: cover;
    transition: 0.2s;
    filter: brightness(0.2);

    &:hover {
      filter: brightness(1);
      transform: translateZ(100px);
    }
    &:hover + img {
      filter: brightness(0.8);
      transform: translateZ(50px) rotateY(23deg);
    }
    &:has(+ img:hover) {
      filter: brightness(0.8);
      transform: translateZ(50px) rotateY(-23deg);
    }
    &:hover + img + img {
      filter: brightness(0.6);
      transform: translateZ(25px) rotateY(10deg);
    }
    &:has(+ img + img:hover) {
      filter: brightness(0.6);
      transform: translateZ(25px) rotateY(-10deg);
    }
  }
}
body {
  margin: 0;
  background: oklch(16% 3% 36deg);
  display: grid;
  height: 100dvh;
  place-items: center;
  overflow-y: clip;
}