Adding a description to a css image slideshow - html

Question

I recently created a css slideshow based on animation,my question how should i add a description to those images that changes with every image that rotates.
Here is the code:
Html
<div id="slider">
<figure>
<img src="http://www.gettyimages.pt/giresources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
</figure>
</div>
CSS
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden;
height:100%;
}
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}
Here is the fiddel
My problem is how should i sincronize the description with the image, i would use transitions but i dont know how should i queue the transitions for the descriptions...
P.S Sorry for any grammatical mistakes.

Answer 1

I'd probably do something like this
The idea being it's a whole div that animated not just the image.
HTML:
<div id="slider">
<figure>
<div class="slide">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt />
<span class="caption">Slide number 01</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 02</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 03</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 04</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 05</span>
</div>
</figure>
</div>
CSS:
#-webkit-keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
height: 100%;
}
div#slider figure .slide {
width: 20%;
float: left;
background: #ccc;
}
div#slider figure img {
width: 100%;
}
div#slider figure .caption {
width: 100%;
color: #333;
font-weight: bold;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}