Наложение значка игры поверх миниатюры с помощью css

Question

Я пытаюсь наложить значок игры поверх миниатюры с помощью css, но не удался.

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

Вы можете видеть иконку при наведении курсора, но не можете получить значок, который будет отображаться поверх миниатюры. Кто-нибудь знает как?

Вот Fiddle

Answer 1

Используйте pseudo element и изменить position стиль.

Чтобы сохранить свой парящий эффект, который вы можете прикрепить селектор :hover к элементу списка и целенаправленное img внутри:

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>