ビデオサムネイル画像に再生ボタンをオーバーレイする方法は？

Question

divサムネイル画像がいくつかあります。 の中のちょうど（私のサムネイル画像は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; 
} 

Answer 1

.OverlayIconにはposition: absoluteを使用できます。

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

の作業例：user1788736の最初のコメントすべての高さが同じと固定されている場合は、上記の解決策はのみ動作

に基づいてhttp://jsfiddle.net/shodaburp/9nEua/

更新たとえば。 playButton.pngディメンションの高さに基づいてtopとleftの値を調整する必要があります。

あなたが現在持っているもの（html、css、jQuery）のjsFiddleを提供できれば、より正確に位置を調整する方が簡単です。

user1788736の二番目のコメントに基づいて更新

私は、同じサイズ（56px X 37px）を持っている私のサーバー上にダミー画像をアップロードしました。ここにあなたのフィドルの更新されたバージョンだ：「？overlayicon wとhの値を見つけるために、どのように」あなたが言うときuser1788736のサードコメント

に基づいてhttp://jsfiddle.net/shodaburp/k6yAQ/1/

追加情報実際にtopとleftの値が.OverlayIconを探しているとします。私が間違っていれば私を修正してください。

まず、ズーム/拡大を可能にする機能をサイトに持たない場合は、pxを画像の単位として貼り付けてください。

あなたのjsFiddleサムの寸法に基づいて、12em x 10emは192px x 160pxに相当します。（61又は62にラウンド我々はPXの小数点を持つことができないので）

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

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

Answer 2

、あなたはまた、ブロックと属性を定義し、全体を作ることができますクリック可能な領域。

Answer 3

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

：

次のように.OverlayIconためtopとleft値を取得するための式であります

[svgを使用した実施例] http://jsfiddle.net/4L2xea4u/

Answer 4

私はちょうど応答のレイアウトのためのこの問題に取り組み、this demoを渡って来ました、それはすばらしく働いていました。