How can have all the images show up on my slider whilst differentiating each image with its own div tag?

Question

I am trying to create a slider for a web-page that I am playing around with and I want each image in my slider to have its own unique identifier and therefore my HTML code is as follows:

<div id="slideshow_testimonial">

    <div id="testi01">
    <img src="http://dummyimage.com/280x200/56AD30/fff.png"/>
    </div>

    <div id="testi02">
    <img src="http://dummyimage.com/280x200/1560f0/fff.png"/>
    </div>

    <div id="testi03">
    <img src="http://dummyimage.com/280x200/C03229/fff.png"/>
    </div>

</div>

However, when I put in my CSS, only one image shows up in the slide and the rest simply disappears. I know that there is something wrong in my CSS code but I am not sure what I need to correct. Below is my CSS code:

slideshow_testimonial { 
    position: relative; 
}

img {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 3;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}

img:nth-child(2) {
  z-index: 2;
  -webkit-animation: slideshow 12s linear 4s infinite;
  -moz-animation: slideshow 12s linear 4s infinite;
  -ms-animation: slideshow 12s linear 4s infinite;
  -o-animation: slideshow 12s linear 4s infinite;
  animation: slideshow 12s linear 4s infinite;
}

img:nth-child(3) {
   z-index: 1;
  -webkit-animation: slideshow 12s linear 8s infinite;
  -moz-animation: slideshow 12s linear 8s infinite;
  -ms-animation: slideshow 12s linear 8s infinite;
  -o-animation: slideshow 12s linear 8s infinite;
  animation: slideshow 12s linear 8s infinite;
}

@-webkit-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-ms-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}

I am new to HTML and CSS and I am still in process of learning how to go about this and I would appreciate any help. Thank You!

Note: (1) I do not wish to make use of javascript for this slider, (2) I really want each image to be uniquely identifiable which is the reasoning behind my use of the div tags for each image in the slide.

Answer 1

Method 1: Remove div containers for images, add ID to images:

DEMO: JSFIDDLE

<div id="slideshow_testimonial">
    <img src="http://dummyimage.com/280x200/56AD30/fff.png" id="testi01"/>
    <img src="http://dummyimage.com/280x200/1560f0/fff.png" id="testi02"/>
    <img src="http://dummyimage.com/280x200/C03229/fff.png" id="testi03"/>
</div>

(CSS IS UNCHANGED)

Method 2: Target the unique ID's of the image's container divs. The CSS selectors can be adjusted for your needs (by using :nth-child, as GCyrillus points out), but this should achieve what you want.

DEMO: JSFIDDLE

(HTML IS UNCHANGED)

#slideshow_testimonial { 
    position: relative; 
}

#testi01 img {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 3;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}

#testi02 img {
  z-index: 2;
   position: absolute;
   top: 1px;
   left: 1px;
  -webkit-animation: slideshow 12s linear 4s infinite;
  -moz-animation: slideshow 12s linear 4s infinite;
  -ms-animation: slideshow 12s linear 4s infinite;
  -o-animation: slideshow 12s linear 4s infinite;
  animation: slideshow 12s linear 4s infinite;
}

#testi03 img {
   z-index: 1;
   position: absolute;
   top: 1px;
   left: 1px;
  -webkit-animation: slideshow 12s linear 8s infinite;
  -moz-animation: slideshow 12s linear 8s infinite;
  -ms-animation: slideshow 12s linear 8s infinite;
  -o-animation: slideshow 12s linear 8s infinite;
  animation: slideshow 12s linear 8s infinite;
}

@-webkit-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-ms-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}

Answer 2

Here is JS fiddle, that will help you understand your mistakes. You were using wrong selectors, and by it addressing wrong containers. I'd change CSS a little so you can better see how it works.

JSFIDDLE

HTML:

<div id="slideshow_testimonial">

    <div id="testi01">
    <img src="http://dummyimage.com/280x200/56AD30/fff.png"/>
    </div>

    <div id="testi02">
    <img src="http://dummyimage.com/280x200/1560f0/fff.png"/>
    </div>

    <div id="testi03">
    <img src="http://dummyimage.com/280x200/C03229/fff.png"/>
    </div>

</div>

CSS:

slideshow_testimonial { 
    position: relative; 
}

img{

}

#slideshow_testimonial div:nth-child(1) {
    z-index: 3;
    -webkit-animation: slideshow 12s linear 0s infinite;
    -moz-animation: slideshow 12s linear 0s infinite;
    -ms-animation: slideshow 12s linear 0s infinite;
    -o-animation: slideshow 12s linear 0s infinite;
    animation: slideshow 12s linear 0s infinite;
}

#slideshow_testimonial  div:nth-child(2) {
  z-index: 2;
  -webkit-animation: slideshow 12s linear 4s infinite;
  -moz-animation: slideshow 12s linear 4s infinite;
  -ms-animation: slideshow 12s linear 4s infinite;
  -o-animation: slideshow 12s linear 4s infinite;
  animation: slideshow 12s linear 4s infinite;
}

#slideshow_testimonial  div:nth-child(3) {
   z-index: 1;
  -webkit-animation: slideshow 12s linear 8s infinite;
  -moz-animation: slideshow 12s linear 8s infinite;
  -ms-animation: slideshow 12s linear 8s infinite;
  -o-animation: slideshow 12s linear 8s infinite;
  animation: slideshow 12s linear 8s infinite;
}

@-webkit-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-moz-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-ms-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@-o-keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;} 
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}