css - 3 つの画像が残っている画像のクロスフェード ギャラリー

Question

以下に示すように、位置 4 (画像 4、画像 5、画像 6)で、画像のクロスフェード (フェードイン/フェードアウト)ギャラリーを発生させたいフィドルがあります。現在、その位置の画像6のみを表示しています。

https://jsfiddle.net/k0vzthne/embedded/result

これは、フィドルで使用した CSS コードです。現時点では、位置 4 で進行中の画像のクロスフェード (フェードイン/フェードアウト) ギャラリーは表示されません。

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  opacity: 1;
}

.featured-block a:nth-of-type(4) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 4s;
}


.featured-block a:nth-of-type(6) {
  animation-delay: 8s;
}

@keyframes cf4FadeInOut {
  0% {opacity: 0;}
    20% {opacity: 1;z-index: 999;}
    33% {opacity: 1;}
    53% {opacity: 0;z-index: 1;}
    100% {opacity: 0;}
}

問題文：

画像のクロスフェード ギャラリーが位置 4 (画像 4、画像 5、画像 6 を含む) で 発生し、現在フィドルに存在するように3 つの画像が残っているようにするには、上記の CSS コードにどのような変更を加える必要があるのか​​ 疑問に思っています。位置 1、位置 2、および位置 3。