li :hover background effect goes behind the parent container's background - css

Question

I'm trying to achieve this
social icons hover effect
The dark background should moves down and fill the box on mouse over. This works perfectly when I use no background for the parent container but the hover effect goes behind the parent container when a background image is used.
Screenshot: not showing when bg image set for parent container
and I can see the effect when an opacity value is set for the parent container.
I've tried using negative z-index for the parent but not working for some reason.
My code
.hero {
background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
background-size: cover;
height: 550px;
padding: 40px 10px;
/*opacity :0.5; Works in Background*/
}
.social-icons {
}
.social-icons li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 60px 5px 5px 60px;
text-decoration: none;
position: relative;
border: 3px solid #000;
overflow: hidden;
transition: all .5s linear;
}
.social-icons li:hover {
color: #000;
}
.social-icons li:hover:before {
left: -55px;
}
.social-icons li:before {
content: "";
position: absolute;
top: 0;
left: -280px;
background: #000;
height: 100%;
width: 250px;
transform: skew(-50deg);
z-index: -1;
transition: all .5s linear;
}
.social-icons li a {
color: #000000;
display:block;
}
.social-icons li:hover a {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="hero">
<div class="container">
<div class="row">
<div class="social-icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
</section>

Answer 1

Do like this, give the anchor a a position, i.e. position: relative and remove the z-index.
I also adjusted your li:before/li:hover:before rules a little, so the transition work both ways.
.hero {
background: url('http://lorempixel.com/output/abstract-q-g-640-480-3.jpg') no-repeat;
background-size: cover;
height: 550px;
padding: 40px 10px;
/*opacity :0.5; Works in Background*/
}
.social-icons {
}
.social-icons li {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
color: #fff;
padding: 60px 5px 5px 60px;
position: relative;
border: 3px solid #000;
overflow: hidden;
}
.social-icons li:hover {
color: #000;
}
.social-icons li:before {
content: "";
position: absolute;
top: 0;
left: 280px;
background: #000;
height: 100%;
transform: skew(-50deg);
width: 250px;
transition: left .2s linear;
}
.social-icons li:hover:before {
left: -20px;
transition: left .2s linear;
}
.social-icons li a {
position: relative;
color: #000000;
display:block;
}
.social-icons li:hover a {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<section class="hero">
<div class="container">
<div class="row">
<div class="social-icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
</section>