title: How to overlay a play button over a thumbnail image using only CSS
body: <p>I've created this simple html, css code that overlays a play button over a thumbnail. All works perfectly, except that the button is behind the dark background:</p>
  
  <p><a href="https://jsfiddle.net/72r62kzy/20/" rel="nofollow noreferrer">https://jsfiddle.net/72r62kzy/20/</a></p>
  
  <p>I'm almost here, but for this CSS style to be perfect, i need the white play button to be on top of the dark background. How?</p>
  
  <pre><code>&lt;ul class="thumb"&gt;
    &lt;li&gt;
      &lt;div class="overlay"&gt;
           &lt;a href="#"&gt;&lt;img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""&gt;&lt;/a&gt;
           &lt;span class="time"&gt;3:28&lt;/span&gt;
           &lt;a href="#" class="playWrapper"&gt;
              &lt;span class="playBtn"&gt;&lt;img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""&gt;&lt;/span&gt;
           &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="thumbCaption"&gt;&lt;a href=""&gt;This is the description of the video...&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.thumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
  
  .thumb li {
    width: 193px;
  }
  
  .thumb li ~ li {
    margin-left: 20px;
  }
  
  .thumb .thumbCaption {
    padding: 10px 0;
  }
  
  .overlay {
    position: relative;
  }
  
  .overlay .thumbnail {
    display: block;
  }
  
  .overlay .time {
    position: absolute; z-index: 2;
    right: 3px; bottom: 3px;
    padding: 2px 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
  }
  
  .overlay .playWrapper {
    opacity: 0;
    position: absolute; z-index: 1;
    top: 0;
    width: 192px; height: 109px;
    background-color: black;
  }
  
  .playWrapper .playBtn {
    position: absolute; z-index: 2;
    width: 50px; height: 50px;
    left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* center */
  }
  
  .thumb .overlay:hover .playWrapper {
    opacity: .6;
  }
  </code></pre>