使用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>