Html 使用css在缩略图顶部覆盖播放图标

我试图用css在缩略图上覆盖一个播放图标，但没有成功

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

您可以在悬停时看到图标，但无法将图标置于缩略图上方。 有人知道怎么做吗

以下是使用a和更改位置样式的方法

要保留悬停效果，可以将：hover选择器附加到列表项，并将img作为目标：

html，正文{ 保证金：0； 填充：0； } .内容{ 字体大小：10px； 保证金：0自动0； 宽度：75%； 最大宽度：750px； 文本对齐：左对齐； 垫底：3em； 背景色：eee； } p{ 字号：2em； 线高：1.4em； 字母间距：正常； 字体风格：普通； 字体大小：正常； 边际：0.01米0； } .播放图标：之后{ 位置：绝对位置； 排名：0； 左：0； 内容：； 宽度：100%； 身高：100%； 背景：urlhttps://cdn1.iconfinder.com/data/icons/video-controls/32/play-20.png; 背景重复：无重复； 背景位置：中心； 背景色：透明； z指数：9999； } .拇指网格{ 显示：块； 宽度：100%； 填充：0； 保证金：3em0 3em0； 背景色：； 列表样式类型：无； } .拇指网格：之后{ 内容：； 宽度：0； 显示：块； 明确：两者皆有； } 李先生{ 位置：相对位置； 溢出：隐藏； 宽度：16%； 利润率：0.5%5%0； 显示：块； 浮动：左； 垫底：16%； } .拇指网格li:N-child5n{ 右边距：0； } .拇指网格img{ 位置：绝对位置； 左：0； 排名：0； 光标：指针； 宽度：100%； 背景色：ccc； } .拇指网格li：悬停img{ 不透明度：0.5； } 即使是团队中的动态测试，wordt geleid door和enthousiaste en bekwame quizmaster。门米德尔·范比尔德（Doormiddel van beeld）是一个温驯的品种。Het raden van tunes、videofragmenten、teksten、foto的《与na teamberaad的问答比赛手册》

---

当然谢谢：after元素，但是悬停效果消失了。它需要一个单独的悬停代码：after:hover等吗？谢谢伙计！哦，当然了，李：很抱歉，这很简单，我现在脑子里都是代码。好东西！