<div class="slider">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/91aa893e8dd7ed09fcfaffe681216a0aad38ab6c.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/bcd6c5262939282e76cfb650048f384b9b6e9ba0.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/9/9c229baf3c301d3c2b6470a943f35ad5737687dc.jpeg" alt="image title">
  <img src="https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/b/b19d91a86dd9a28de7c6de8b912558838d3f4fd3.jpeg" alt="image title">
</div>

html,
body {
  height: 100%;
}

body {
  background: #000;
  display: grid;
  place-content: center;
}

.slider {
  display: flex;
  column-gap: 20px;
}

.slider {
  transform-style: preserve-3d;
  transform: perspective(1200px);
}
.slider img {
  width: 100px;
  height: 220px;
  border-radius: 16px;
  object-fit: cover;

  filter: grayscale(1);
  transition: all 0.5s;
}

.slider img:hover {
  filter: grayscale(0);
  transform: translateZ(200px);
}

.slider img:hover + * {
  filter: grayscale(0.2);
  transform: translateZ(150px) rotatey(30deg);
}

.slider img:hover + * + * {
  filter: grayscale(0.4);
  transform: translateZ(70px) rotatey(18deg);
}

.slider img:hover + * + * + * {
  filter: grayscale(0.6);
  transform: translateZ(30px) rotatey(10deg);
}

.slider img:has(+ *:hover) {
  filter: grayscale(0.2);
  transform: translateZ(150px) rotatey(-30deg);
}

.slider img:has(+ * + *:hover) {
  filter: grayscale(0.4);
  transform: translateZ(70px) rotatey(-18deg);
}

.slider img:has(+ * + * + *:hover) {
  filter: grayscale(0.6);
  transform: translateZ(30px) rotatey(-10deg);
}