<div class="cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.cards {
  display: flex;
  gap: 2px;
}

.card {
  width: 30px;
  height: 100px;
  background: red;
  transition: 0.3s;
  filter: brightness(0.5);

  &:hover {
    scale: 1.3;
    filter: brightness(1);
    z-index: 3;

    /* next card */
    & + * {
      scale: 1.2;
      filter: brightness(0.8);
      z-index: 2;
    }
    /* next card after that */
    & + * + * {
      scale: 1.1;
      filter: brightness(0.9);
      z-index: 1;
    }

    /* previous card */
    :has(+ &) {
      scale: 1.2;
      filter: brightness(0.9);
      z-index: 2;
    }
    /* previous card before that */
    :has(+ * + &) {
      scale: 1.1;
      filter: brightness(0.8);
      z-index: 1;
    }
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: clip;
}