Hyperlink can't be clicked under div - html

Question

I've tried experimenting with z-index and position:relative but I can't seem to get this to work.
I've made it so once you hover your mouse over the images, a hyperlink appears, but for some reason you can't click the hyperlink. Can someone please show me how to bring it to the front?
Here's my code:
.caption {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-right: 1.25em;
margin-top: 1.250em;
margin-bottom: 2.188em;
margin-left: 1.25em;
top: 0;
bottom: 0;
right: 0;
display: block;
max-width: 100%;
height: auto;
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.imageh:hover+.caption::before {
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}
.imageh {
position: absolute;
display: block;
height: 100%;
width: 100%;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.imageh:hover+.caption .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__media {
padding-top: 130px;
max-width: 100%;
}
<span class="imageh"></span>
<div class="caption">
<img src="http://bsnscb.com/data/out/78/27073638-free-farm-wallpapers.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
</div>
</div>
</div>
Thanks

Answer 1

Instead of using the span element on hover which is a sibling to the image container(making it hard to avoid flickering during hover). You can just hover on the caption container div itself. See sample code below
.caption {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
margin-right: 1.25em;
margin-top: 1.250em;
margin-bottom: 2.188em;
margin-left: 1.25em;
top: 0;
bottom: 0;
right: 0;
display: block;
max-width: 100%;
height: auto;
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .5);
}
.imageh {
/* position: absolute;
display: block;
height: 100%;
width: 100%;
z-index: 1;
top: 0;
bottom: 0;
right: 0;*/
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__media {
padding-top: 130px;
max-width: 100%;
}
<span class="imageh"></span>
<div class="caption">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<h1 style="text-align:center" class="caption__media"><a style="color:white;" href="artists.html">OUR ARTISTS</a></h1>
</div>
</div>
</div>

Answer 2

Keep everything as is except two things. Set the element with class "imageh" with z-index 0 and the element with class "caption__overlay__content" with z-index 1.