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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;