如何覆蓋視頻縮略圖圖像上的播放按鈕？

我有一些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

如何覆蓋視頻縮略圖圖像上的播放按鈕？

回答

相關問題