<p>カードをホバーしてみてね</p>

<ul>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>

<ul>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>

<p>アーチ状に並べるパターン</p>

<ul style="--length: 6;">
  <li><div style="--index: 0;"></div></li>
  <li><div style="--index: 1;"></div></li>
  <li><div style="--index: 2;"></div></li>
  <li><div style="--index: 3;"></div></li>
  <li><div style="--index: 4;"></div></li>
  <li><div style="--index: 5;"></div></li>
</ul>

<ul style="--length: 3;">
  <li><div style="--index: 0;"></div></li>
  <li><div style="--index: 1;"></div></li>
  <li><div style="--index: 2;"></div></li>
</ul>

ul {
  display: flex;
  justify-content: center;
  max-width: 24rem;
}

li:not(:last-child) {
  /* :not(:last-child) に適用することで、基本的にすべて縮めて、最後の1枚だけ幅を保持する */
  min-width: 0;
  /* 最小の重なり幅。枚数が少ないときでもこの幅は重ねる */
  margin-right: -2rem;
}


li {  
  /* ホバー時アニメーション */
  transition-property: flex-shrink, translate;
  transition-duration: 0.2s;
  /* ホバーしたカードが前面に出ないようにする */
  isolation: isolate;
}

li:hover {
  flex-shrink: 0;
  translate: 0 -1rem;
}


div {
  /* カードの見た目 */
  width: 6rem;
  aspect-ratio: 58/89;
  background-color: #c00606;
  box-shadow: 0 0 6px black;
  border: 0.5rem white solid;
  border-radius: 0.5rem;

  /* アーチ状に並べる */
  --degree: calc((var(--index) - ((var(--length) - 1) / 2)) * 6deg);
  rotate: var(--degree);
  translate: 0 calc((1 - cos(var(--degree))) * 300%);
}

body {
  display: grid;
  justify-content: center;
  gap: 4rem;
  padding: 2rem;
}