title: CSS for Slideshow box with images and captions
body: <p>I was about to make a Slideshow for a website I'm currently working on, but I'm stuck at the styling/layout. I know that there already are Slideshows read-to-use online, but I wanted to make my own clean and simple one.</p>
  
  <p>The images are planned to be moved from right to left, not a fade effect. I'm also willing to use a little JS, to keep the CSS cleaner (CSS transitions will be used though).</p>
  
  <p>My current status: <a href="https://jsfiddle.net/8c3ods5o/" rel="nofollow noreferrer">https://jsfiddle.net/8c3ods5o/</a></p>
  
  <p>This seems to work as-is (not really tested though), but I need captions under the image as well. My first thought to accomplish this, fails bad though: <a href="https://jsfiddle.net/8c3ods5o/2/" rel="nofollow noreferrer">https://jsfiddle.net/8c3ods5o/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
      max-width: 60%;
      overflow: hidden;
  }
  
  .slider .img-wrapper {
      display: flex;
  }
  
  .slider .img-wrapper &gt; div {
      position: relative;
  }
  
  .slider img {
      width: 100%;
      height: 100%;
  }
  
  .slider .caption {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0, 0.6);
      color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="screenshots slider"&gt;
      &lt;div class="img-wrapper"&gt;
          &lt;div&gt;
              &lt;img src="http://lorempixel.com/640/360/"&gt;
              &lt;span class="caption"&gt;some caption text&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="http://lorempixel.com/640/360/"&gt;
              &lt;span class="caption"&gt;another caption..&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="http://lorempixel.com/640/360/"&gt;
              &lt;span class="caption"&gt;another caption..&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="http://lorempixel.com/640/360/"&gt;
              &lt;span class="caption"&gt;another caption..&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>