Как наложить кнопку воспроизведения на миниатюре изображения, используя только CSS ⇐ Html

[Anonymous]

Я создал этот простой код HTML, CSS, который накладывает кнопку воспроизведения на миниатюру. Все работает отлично, за исключением того, что кнопка стоит за темным фоном:

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

Я почти здесь, но для того, чтобы этот стиль CSS был идеальным, мне нужно белую кнопку воспроизведения, чтобы быть на вершине темного фон. Как? < /P>

• 
  
  
  
  3:28
  
  
  
  
  
  
  This is the description of the video...

< /code>

css < /p>

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


Подробнее здесь: https://stackoverflow.com/questions/412 ... g-only-css