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

[Anonymous]

Я создал этот простой код HTML, CSS, который накладывает кнопку воспроизведения на миниатюру. Все работает отлично, за исключением того, что кнопка стоит за темным фоном:
https://jsfiddle.net/72r62kzy/20/
Я почти здесь, но для того, чтобы стиль 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;
}< /code>
[list]
[*]

[url=#]
[img]https://homepages.cae.wisc.edu/~ece533/images/monarch.png[/img]
[/url]
3:28
[url=#]

[img]http://wptf.com/wp-content/uploads/2014/05/play-button.png[/img]

[/url]

This is the description of the video...

[/list]

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