HTML text over image while maintaining background image clickability - html

Question

on my website I have a background button that is "hidden" (it blends in with the background, but is secretly a button) and it was working fine until I edited my page with text on it.
On some monitors the text covers the image, but not completely - there is space below and beside it where the image peeks through.
However, this makes the image overlap the text, breaking the illusion. Setting the z-index to -1 makes it go behind the text, but makes it unable to be clicked.
Is there any way to make something behind text clickable while staying behind text?
The "eye" between the columns is the hidden image.
Current code for image:
<a href= "/aboutme/vision.html">
<img style="position:absolute; top:354px; left:975px; width:108px; height:32px; z-index:-1" src="eye.png">
</a>

Answer 1

I rearranged the website layout to use a clickable div instead of an image, and now it works on click even if text is over it. I then put it in a nested div which is the size of the entire window, so the links never get misaligned based on window size:
HTML:
<div id="bodyDiv">
<div class="secret" style="position:relative; top:770px; left:1168px; width:108px; height:32px; background-color:black;" onclick="location.href='/aboutme/vision.html'"></div>
</div>
CSS:
#bodyDiv {
background-image: url("homebackgroundsmall.png");
background-repeat: no-repeat;
background-position: center;
height: 1200px;
width: 1684px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -842px;
}
The downside to this is that there is no mouse change on hover, making the secrets overly hidden. To personally fix this to make it more obvious, I made the .secret class so on hover the background portion of the div fades out by increasing the background opacity to 1 (which is black):
CSS:
.secret {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.secret:hover {
opacity: 1;
}