overlay css play button - html

Question

I need to add an image to overlay a play button only when you hover over an image, I have it somewhat working, however I can't get it over the image, it only shows up behind the image. I've tried setting the Z-index to be higher but it still wont' work.
Here is my markup for the 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>
and here is my 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

First: parent elements will never get "on top" of their child elements. So setting .article to a higher z-index than its child .article img will never work.
You could use the :after pseudo selector to dynamically add some extra content to the .article element on :hover. Here's an example:
.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

Please check out this solution jsfiddle, hope it will help you
.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>