My links stop working when the box hover is applied - html

Question

Ive tried using z-index to over rule the absolute and relative positioning on the box hovers but it just doesn't work. Any body got any suggestions as to why? The links are there but to the side of the images rather than directly above.
HTML
<div id="container1">
<img src="images/blindsided1.jpg">
<div class="textbox">
<p id="title1">First Coding <br> Attempt</br></p>
<p id="text1"> This brief was my first attempt at designing a website.</p>
</div>
</div>
CSS
a:hover {
z-index: 99;
}
#container1 {
position:absolute;
float:left;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Answer 1

You can wrap the whole hoverable div in the anchor tag, that way you can ensure that the hoverable div is clickable and that it points to the link that the image is referencing.
HTML
<div id="container1">
<a href="firstcoding.html">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png">
<div class="textbox">
<p id="title1">First Coding
<br>Attempt</br>
</p>
<p id="text1">
This brief was my first attempt at designing a website.
</p>
</div>
</a>
</div>
CSS
a:hover {
z-index: 99;
}
.textbox:hover {
opacity:1;
}
#title1 {
padding-top: 20px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:32px;
word-spacing:2px;
letter-spacing:1px;
text-decoration:underline;
}
#text1 {
padding-top:40px;
text-align:center;
color:#FFF;
font-family:"bebas";
font-size:16px;
word-spacing:2px;
letter-spacing:1px;
}
.textbox {
width:361px;
height:362px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:300px;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Answer 2

The absolutely positioned child is sitting on top of the anchor link so any pointer interaction would fail.
You could use pointer-events:none on that child which would allow events to pass through but browser support it not great.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a,
img {
display: block;
}
#container1 {
position: relative;
border: 1px solid red;
float: left;
}
#container1:hover .textbox {
opacity: 1;
}
#title1 {
padding-top: 20px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 32px;
word-spacing: 2px;
letter-spacing: 1px;
text-decoration: underline;
}
#text1 {
padding-top: 40px;
text-align: center;
color: #FFF;
font-family: "bebas";
font-size: 16px;
word-spacing: 2px;
letter-spacing: 1px;
}
.textbox {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
pointer-events: none;
}
<div id="container1">
<a href="firstcoding.html">
<img src="http://lorempixel.com/output/cats-h-c-361-362-10.jpg" />
</a>
<div class="textbox">
<p id="title1">First Coding
<br/>Attempt
</p>
<p id="text1">This brief was my first attempt at designing a website.</p>
</div>
You would do better to wrap the div inside the link and re-factor your code as suggested in the comments.