用CSS缩略图覆盖播放图标 [英] Overlay a play icon on top of thumbnail with css

问题描述

 < ul class = 拇指格> 
< li class =play-icon>< img src =image.url/>< / li> 
< / ul> 
  

悬停时可以看到图标，但无法将图标放在缩略图顶部。
有人知道如何？

以下是小提琴

解决方案

使用伪元素并更改位置样式。

保留悬停效果，可以将：hover 选择器附加到列表项目中，并将目标放在 img 里面：

  html，body {margin：0; padding：0;}。content {font-size：10px;余量：0自动0;宽度：75％; max-width：750px; text-align：left;填充底部：3em; background-color：#eee;} p {font-size：2em; line-height：1.4em; letter-spacing：正常; font-style：normal; font-weight：normal; margin：0 0 1em 0;}。play-icon：after {position：absolute;顶部：0;左：0;内容：'';宽度：100％;身高：100％;背景：url（https://cdn1.iconfinder.com/data/icons/video-controls/32/play-20.png）;背景重复：不重复; background-position：center center; background-color：transparent; z-index：9999;}。thumb-grid {display：block;宽度：100％;填充：0;保证金：3em 0 3em 0;背景颜色：; list-style-type：none;}。thumb-grid：after {content：'';宽度：0;显示：块; clear：both;}。thumb-grid li {position：relative;溢出：隐藏;宽度：16％;保证金：0 5％5％0;显示：块;向左飘浮; padding-bottom：16％;}。thumb-grid li：nth-​​child（5n）{margin-right：0;}。thumb-grid img {position：absolute;左：0; top：0;光标：指针;宽度：100％;背景颜色：#ccc;}。thumb-grid li：hover img {opacity：0.5;}  

 < div class =content> < p>在团队中进行动态测验，不要再犯错。 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> < / div>  

I trying to overlay a play icon on top of thumbnail with css, but not successful.

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

You can see the icon when hovering but can't get the icon to go on top of the thumbnail. Does anyone know how?

Here is the Fiddle

解决方案

Use a pseudo element and change the position style.

To preserve your hovering effect you can attach the :hover selector to the list item and target the img inside:

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>

这篇关于用CSS缩略图覆盖播放图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！