This issue is not related to the z-index property.
Since your a tag is a child of leftPost, it will inherit the opacity set on its parent. Changing the z-index value will not resolve this problem.
To fix this issue, you have two options:
Option 1:
Move the a element so that it is no longer a direct child of leftPost.
or
Apply the opacity to 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><a href="#">link</a></h3>
</div>
<div class="opacityDiv"></div>
</div>
</div>