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