Overlay a play icon on top of thumbnail with css

Question

I trying to overlay a play icon on top of thumbnail with css, but not successful.

<ul class="thumb-grid">
        <li class="play-icon"><img src="image.url"/></li>
</ul>

You can see the icon when hovering but can't get the icon to go on top of the thumbnail. Does anyone know how?

Here is the Fiddle

Answer 1

Use a pseudo element and change the position style.

To preserve your hovering effect you can attach the :hover selector to the list item and target the img inside:

html, body {
    margin: 0;
    padding: 0;
}
.content {
    font-size: 10px;
    margin: 0 auto 0;
    width: 75%;
    max-width: 750px;
    text-align: left;
    padding-bottom: 3em;
    background-color: #eee;
}
p {
    font-size: 2em;
    line-height: 1.4em;
    letter-spacing: normal;
    font-style: normal;
    font-weight: normal;
    margin: 0 0 1em 0;
}
.play-icon:after {
    position:absolute;
    top:0;
    left:0;
    content:'';
    width: 100%;
    height: 100%;
    background: url("https://cdn1.iconfinder.com/data/icons/video-controls/32/play-20.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    z-index: 9999;
}
.thumb-grid {
    display: block;
    width: 100%;
    padding: 0;
    margin: 3em 0 3em 0;
    background-color:;
    list-style-type: none;
}
.thumb-grid:after {
    content:'';
    width: 0;
    display: block;
    clear: both;
}
.thumb-grid li {
    position: relative;
    overflow: hidden;
    width: 16%;
    margin: 0 5% 5% 0;
    display: block;
    float: left;
    padding-bottom: 16%;
}
.thumb-grid li:nth-child(5n) {
    margin-right: 0;
}
.thumb-grid img {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 100%;
    background-color: #ccc;
}
.thumb-grid li:hover img {
    opacity: 0.5;
}

<div class="content">
    <p>Een dynamische quiz in teams, die wordt geleid door een enthousiaste en bekwame quizmaster. Doormiddel van beeld en geluid wordt een breed scala aan vragen voorgelegd. Het raden van tunes, videofragmenten, teksten, foto’s met de hand op de quiz-knop of na teamberaad.</p>
    <ul class="thumb-grid">
        <li class="play-icon"><img src="http://images.kaneva.com/filestore9/5112880/6412551/squareUyellowUsmileyUface_ad.jpg" /></li>
        <li><img src="http://images.kaneva.com/filestore9/5112880/6412551/squareUyellowUsmileyUface_ad.jpg" /></li>
        <li><img src="http://images.kaneva.com/filestore9/5112880/6412551/squareUyellowUsmileyUface_ad.jpg" /></li>
        <li><img src="http://images.kaneva.com/filestore9/5112880/6412551/squareUyellowUsmileyUface_ad.jpg" /></li>
        <li><img src="http://images.kaneva.com/filestore9/5112880/6412551/squareUyellowUsmileyUface_ad.jpg" /></li>
    </ul>
</div>