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