如何覆盖视频缩略图图像上的播放按钮？

我有一些div缩略图图像。有没有一种方法可以使用css（我的播放图标有一个类名称overlayicon）将播放图标放在缩略图图像的中心（我的缩略图图像具有类名称ItemImage）？如何覆盖视频缩略图图像上的播放按钮？

<div class="ItemLeft"> 


    <div class="Clipping">   
    <a class="ImageLink" href="/videos/id8" title="galaxy"> 
     <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" /> 
     <img class="OverlayIcon" src="/Images/1.png" alt="" /> 
    </a> 
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a> 
    </div> 

    <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div> 

    <div class="VideoAge">1 daybefore</div> 

    <div class="PlaysInfo"> broadcast 265</div> 

</div>

我的CSS：

.Item.ItemLeft, .Item.ItemMiddle, .Item.ItemRight 
{ 
    float:left; 
    margin-right:15px; 
} 
.clear 
{ 
    clear:both; 
} 


img.ItemImage { 
    width: 18em; 
    height: 10em; 
} 


.OverlayIcon { 
    position: absolute; 
    top: 40px; 
    left: 65px; 
}

来源

2013-03-21 user1788736

您可以在您的.OverlayIcon上使用position: absolute。例如：

.ImageLink { 
    height: 300px; 
    width: 350px; 
    position: relative; 
    display: block; 
} 
.ItemImage { 
    height: 300px; 
    width: 350px; 
} 
.OverlayIcon { 
    position: absolute; 
    top: 40px; 
    left: 65px; 
}

工作例如：http://jsfiddle.net/shodaburp/9nEua/

更新基于user1788736的第一个评论

上述解决方案只有当所有的高度是相同的，固定的工作。然后，您需要根据playButton.png尺寸的高度调整top和left值。

如果你可以提供你当前拥有的jsFiddle（html，css，jQuery），那么更容易更准确地调整定位。

更新基于user1788736的第二评论

我上传了具有相同的大小我的服务器上的虚拟图像（56px X 37px）。这里是你的提琴的更新版本：“如何找到值overlayicon W和H” http://jsfiddle.net/shodaburp/k6yAQ/1/

额外的信息基础上user1788736的第三点意见

当你说我假设你实际上正在寻找.OverlayIcon的top和left值。如果我错了，请纠正我。

首先，如果您不打算在您的网站上启用缩放/放大功能，只需使用px作为图像的单位测量。

根据您的jsFiddle拇指尺寸，12em x 10em相当于192px x 160px。

的公式来获得top和left值.OverlayIcon如下：

OverlayIconTop = (ItemImageHeight - OverlayIconHeight)/2 
OverlayIconTop = (160 - 37)/2 = 61.5

（舍入到61或62，因为我们不能有PX十进制）

OverlayIconLeft = (ItemImageHeight - OverlayIconHeight)/2 
OverlayIconLeft = (192 - 56)/2 = 68

来源

2013-03-21 05:14:04 kyooriouskoala

这里是小提琴我想要在每个拇指中间的那些红色图标.http：//jsfiddle.net/k6yAQ/ – user1788736 2013-03-21 05:44:44

你可以更新播放按钮图像吗？由于访问受限，它没有显示。 “403 - 禁止”。如果不是，图像维度是什么？ – kyooriouskoala 2013-03-21 05:59:57

我不知道为什么它不显示在你身边，但尺寸是：56px×37px。有没有其他图像托管，我可以在那里上传？ – user1788736 2013-03-21 06:04:27

可以使缩略图图像作为背景，然后有超过它的播放按钮图像，你还可以定义一个属性是一个块，使整个区域可点击。

来源

2013-03-21 05:10:02

.container{ 
    position: relative; 
    width: 200px; 
} 

.container img{ 
    width: 200px; 
} 

.container .play-icon{ 
    cursor: pointer; 
    position: absolute; 
    top : 50%; 
    left : 50%; 
    transform: translate(-50%, -50%); 
} 

svg:hover #play-svg{ 
    fill: #CC181E; 
}

[使用svg的工作示例] http://jsfiddle.net/4L2xea4u/

来源

2015-03-20 18:37:56

效果很好，但是我有一个缩略图列表，第一个缩略图可以悬停，但其余的会共享相同的标识符，他们不会将鼠标悬停在上面，任何想法都需要某种循环。 – GAV 2015-11-18 15:48:41

@Gav change id =“play-svg”to class =“play-svg”on html and svg：hover＃play-svg {to svg：hover .play-svg { – egiray 2016-04-28 10:59:14

我刚刚为这个问题进行了反应式布局，遇到了this demo，它的工作非常出色。

来源

2015-04-13 17:12:41 respondcreate

如何覆盖视频缩略图图像上的播放按钮？

回答

相关问题