将描述添加到css图像幻灯片中

Question

我最近创建了一个基于动画的CSS幻灯片，我的问题是如何为那些随每个旋转图像而变化的图像添加描述。 这是代码：

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

我的问题是我应该如何将描述与图像合并，我会使用过渡，但我不知道如何排列描述的过渡... P.S对于任何语法错误抱歉。

Answer 1

我可能会做this

之类的事情

这个想法是一个完整的div，不仅仅是图像的动画。

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