Proper positioning for z-index and opacity - html

Question

I have nested link in two absolute div's like this:
<div class="container">
<div class="leftPostHolder">
<div class="leftPost">
<h3>link</h3>
</div>
</div>
</div>
First div(leftPostHolder) has black background, second one(leftPost) has red and when second div is hovered opacity of it is set to 0.5 and link background is set to white. Now I want that link to be above these two div's so that darken effect is not applied to it but just to second div with red background. Link with it's background should not be overlayed with that darken effect with opacity.
How to set link above those two elements? I tried with z-index and positioning that link but without success.
Full code is here: http://jsfiddle.net/v21t290a/

Answer 1

This is not a z-index issue.
Your a-tag is a child of leftPost which means it will inherit the opacity. Changing the Z-index will not change this.
The solution to your issue would be to either move the a-element so it's not a direct child of leftPost
or
Put the Opacity on an element that is not the parent of your link.
EXAMPLE:
$(".leftPost").hover(function() {
$(".leftPost a").toggleClass("aHover");
});
.container {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
.leftPostHolder {
background-color: #000;
position: absolute;
width: 30%;
height: 100px;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.leftPost {
width: 100%;
position: absolute;
background-position: center;
background-size: cover;
height: 100%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
display: table;
z-index: 2;
}
.leftPost:hover{
transform: scale(1.05);
-ms-transform: scale(1.05);
-mos-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform-origin: top center;
-ms-transform-origin: center;
-mos-transform-origin: center;
-webkit-transform-origin: center;
}
.opacityDiv {
width: 100%;
position: absolute;
background-position: center;
background-size: cover;
height: 100%;
-webkit-transition-duration: .2s;
transition-duration: .2s;
display: table;
z-index: 1;
}
.leftPost:hover + .opacityDiv {
opacity: 0.5;
}
.leftPost h3 {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.leftPost a{
color: transparent;
text-align: center;
padding:10px;
display:block;
}
.aHover {
color: #454545!important;
transform: rotate(-2deg);
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="leftPostHolder">
<div class="leftPost">
<h3>link</h3>
</div>
<div class="opacityDiv"></div>
</div>
</div>