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;}
}