How to overlay a play button over a thumbnail image using only CSS

Question

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:

https://jsfiddle.net/72r62kzy/20/

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?

<ul class="thumb">
  <li>
    <div class="overlay">
         <a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
         <span class="time">3:28</span>
         <a href="#" class="playWrapper">
            <span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
         </a>
    </div>
    <div class="thumbCaption"><a href="">This is the description of the video...</a></div>
  </li>
</ul>

CSS

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

Answer 1

The reason the play button seems to be behind, is because the container is transparent.
Make the container fully visible opacity: 1, and use the rgba format to add the background (rgba(0,0,0,0.6)).

Also you don't need so many containers.
Here's 2 ways to do that:

JSfiddle - jsfiddle.net/72r62kzy/21

.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: rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center / 50px 50px;
}

.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: 1;
}

<ul class="thumb">
  <li>
    <div class="overlay">
      <a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
      <span class="time">3:28</span>
      <a href="#" class="playWrapper">
        <!--<span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>-->
      </a>
    </div>
    <div class="thumbCaption"><a href="">This is the description of the video...</a></div>
  </li>
  <li>
    <div class="overlay">
      <a href="#"><img class="thumbnail" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" width="192" height="109" alt=""></a>
      <span class="time">12:10</span>
      <a href="#" class="playWrapper">
        <span class="playBtn"><img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png" width="50" height="50" alt=""></span>
      </a>
    </div>
    <div class="thumbCaption"><a href="">description goes here...</a></div>
  </li>
</ul>

The left thumbnail adds the play button with only one container <a>, and the right is the way you have it.

Answer 2

I move the image from the HTML into the CSS

.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-image: url("http://wptf.com/wp-content/uploads/2014/05/play-button.png");
  background-size: 50px 50px;
  background-position: center; 
  background-repeat: no-repeat;
  background-color: black;
}

now you can remove 'http://wptf.com/wp-content/uploads/2014/05/play-button.png' from

Answer 3

Here's the simple solution.

Replace this

.thumb .overlay:hover .playWrapper {
    opacity: .6;
}


.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-color: rgba(0, 0, 0, 1);
}

with

.thumb .overlay:hover .playWrapper {
        opacity: 1;
    }
.overlay .playWrapper {
  opacity: 0;
  position: absolute; z-index: 1;
  top: 0;
  width: 192px; height: 109px;
  background-color: rgba(0, 0, 0, .5);
}