オーバーレイCSSの再生ボタン

Question

画像の上にマウスを置いたときにのみ再生ボタンをオーバーレイする画像を追加する必要がありますが、多少は機能していますが、画像の上に表示することはできません。私はZインデックスを高く設定しようとしましたが、それでも仕事はありません。ここで

はHTML

<div class="articles"><img alt="image1" src="Resources/092812newshubgmtseg1b_167x94.jpg"> 
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Beatus sibi videtur. 3:40</figcaption> 
     </div> 

のための私のマークアップで、ここで私のCSS

.articles img { 
    width: 143px; 
    height: 85px; 
    z-index: 1; 
} 



.articles img:hover { 
    border-bottom: 5px #2ecc71 solid; 
    border-top: 5px #2ecc71 solid; 
    z-index: 1; 
} 

.articles:hover{ 
    color:#2ecc71; 
    background: url(Resources/play.png); 
    z-index:10; 
} 

Answer 1

まずです：親要素は、その子要素の「上」を得ることはありません。そのため、.articleを子の.article imgより高いz-indexに設定することはできません。

:after疑似セレクタを使用して、:hoverの.article要素に追加のコンテンツを動的に追加することができます。ここでは例です：

.articles img { 
 
    width: 143px; 
 
    height: 85px; 
 
} 
 

 
.articles img:hover { 
 
    border-bottom: 5px #2ecc71 solid; 
 
    border-top: 5px #2ecc71 solid; 
 
} 
 

 
.articles:hover:after{ 
 
    content: " "; 
 
    display: block; 
 
    position: absolute; 
 
    left: 70px; 
 
    top: 40px; 
 
    width: 40px; 
 
    height: 20px; 
 
    color: #2ecc71; 
 
    background: url("http://dummyimage.com/40x20/666666/fff&text=PLAY"); 
 
}

<div class="articles"> 
 
    <img alt="image1" src="http://dummyimage.com/143x85/666/fff"> 
 
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Beatus sibi videtur. 3:40</figcaption> 
 
</div>

Answer 2

、このソリューションjsfiddleをチェックアウト、それは位置が適用されたとき、あなた

.articles img {width:143px;height:85px;z-index:1;} 
 
.articles img:hover {border-bottom: 5px #2ecc71 solid;border-top: 5px #2ecc71 solid;z-index: 1;} 
 
.top {Position:absolute;z-index:999;top:5px;opacity:0;} 
 
.top:hover{opacity:1;} 
 
.behind {position:relative;z-index:10;}

<div class="articles"><div class="behind"><img alt="image1" src="http://media.marketwatch.com/video/20120928/092812newshubgmtseg1b/092812newshubgmtseg1b_1280x720.jpg"></div><div class="top"><img style="z-index:1;position:absolute;" alt="image1" src="http://wyeoakmusic.com/site/wp-content/plugins/haiku-minimalist-audio-player/resources/play.png"></div> 
 
      <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Beatus sibi videtur. 3:40</figcaption> 
 
     </div>