fade-in/fade-out gallery of images in css at particular position - html

Question

I have a fiddle as shown below in which at the position 4(marked by yellow circle) from the left where picture 6 is showing, I want cross-fade(fade-in/fade-out) gallery of images to happen.
At position 4, I want cross-fade (fade-in/fade-out) of 3 images(Picture 4, Picture 5, Picture 6) to happen.
https://jsfiddle.net/k0vzthne/embedded/result
This is the CSS codes which I have used. At this moment, I don't see any cross-fade (fade-in/fade-out) gallery of images going on at position 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: 0;
}
.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;}
}
Problem Statement:
I am wondering what changes I should make in the fiddle so that at position 4, fade-in/fade-out of 3 images happen.

Answer 1

There is a problem with display: flex to a container and absolute position for child on it, as described here.
With that on mind, this is my answer:
.featured-block {width: 1000px;}
.featured-block a { display: inline-block; opacity: 1;}
a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
position: absolute;
animation: 12s infinite ease-in-out cf4FadeInOut;
opacity: 0;
z-index: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;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
<div class="featured-block">
<a href="https://www.google.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%201" data-fallback-img="https://via.placeholder.com/200x100?text=picture%201" alt="Outburst">
</figure>
</div>
</a>
<a href="https://www.facebook.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%202" data-fallback-img="https://via.placeholder.com/200x100?text=picture%202"
alt="L'Essentiel with Esther Bégin">
</figure>
</div>
</a>
<a href="https://www.linkedin.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%203" data-fallback-img="https://via.placeholder.com/200x100?text=picture%203" alt="Outburst">
</figure>
</div>
</a>
<a href="https://www.twiiter.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%204" data-fallback-img="https://via.placeholder.com/200x100?text=picture%204" alt="L'Essentiel with Esther Bégin">
</figure>
</div>
</a>
<a href="https://www.amazon.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%205" data-fallback-img="https://via.placeholder.com/200x100?text=picture%205" alt="Outburst">
</figure>
</div>
</a>
<a href="https://www.expedia.com/" class="featured-block__item cf">
<div class="featured-block__item-inner">
<figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%206" data-fallback-img="https://via.placeholder.com/200x100?text=picture%206" alt="L'Essentiel with Esther Bégin">
</figure>
</div>
</a>
</div>

Answer 2

You need to specify the animation name:
.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: 12s infinite ease-in-out cf4FadeInOut;
opacity: 0;
}
take a look here
Edit:
The key to display order issue is to use negative animation delay:
.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: 12s infinite ease-in-out cf4FadeInOut;
opacity:0;
}
.featured-block a:nth-of-type(4) {
animation-delay: -4s;
}
.featured-block a:nth-of-type(5) {
animation-delay: 0s;
}
.featured-block a:nth-of-type(6) {
animation-delay: 4s;
}
#keyframes cf4FadeInOut {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
take a look