наложение кнопки 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 выше z-index, чем его ребенок .article img никогда не будет работать.

Вы можете использовать псевдоселектор :after для динамического добавления дополнительного контента в элемент .article на :hover. Вот пример:

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