Hidden (opacity 0) image triggers link on hover (not wanted) - html

Question

Please see: https://codepen.io/alanvkarlik/pen/BYzYoY
<div class="hover_img">
<a class="hover_link" href="x">
Title
<span>
<img src="image.jpg" width="100%"/>
</span>
</a>
</div>
and css:
.hover_img span {
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 400ms ease-in-out;
}
.hover_img a:hover span {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
basically if you go to my site, and hover below last link "Do Graphic Designers Need To Be Human?" the image will still show up because it's "hidden" underneath, moving mouse even lower triggers another image/link
I'm not sure if I can simplify the code somehow to make it work? All I want is for the image to show up when the mouse is hovering the link ONLY, not the area around it

Answer 1

Adding just display: none to .hover_img span should helps a bit:
.hover_img span {
display: none;
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 400ms ease-in-out;
}

Answer 2

I tried your code, I was able to do it but animation is gone now. Hopefully you will be able to resolve it.
/* PROJECTS LINKS + BACKGROUND */
.hover_link > span { display: none; }
}
.hover_link {
transition: 0.3s;
text-decoration: none;
padding: 0 3px;
background-color: #5544ee;
color: #000;
padding: 0px 3px;
text-decoration: none;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 72%,rgba(85,68,238,0) 72%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}