I'm having trouble getting my h2 text to appear above my images when hovered over. I keep receiving an error message in Chrome Developer Tools saying that "display: relative" is not a valid property value, but I can't figure out why. I've set the position of my h2 text as absolute with top and left at 0px, yet it still remains hidden underneath the image. Any assistance would be greatly appreciated.
HTML
<div class="cta-wrapper">
<div class="cta">
<img src="Photos/mypedal.png">
<a href="Products/productroom.php"><h2>Product Room</h2></a>
</div>
<div class="cta">
<img src="Photos/signup.png">
<a href="Users/createaccount.php"><h2>Sign Up</h2></a>
</div>
<div class="cta">
<img src="Photos/features.png">
<a href=""><h2>Features</h2></a>
</div>
</div>
CSS
.cta-wrapper {
width: 960px;
margin: 0 auto;
margin-top: 80px;
}
.cta {
display: block;
float: left;
width: 200px;
height: 200px;
margin: 0px 60px;
}
.cta a {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.cta h2 {
position: absolute;
text-decoration: none;
color: #BBBBBB;
}
.cta img {
position: absolute;
top: 0px;
left: 0px;
}