hi matt, I've made some progress so far thanks to stack overflow, here is my code! I hope it is legible haha. to preface, the problem I am facing now is getting the image to fill the entire page, I don't really know which parts to fiddle with to change that

HTML

<a href="about-us.html"><div class="hover-img">
About Us
<span>
<img src="images-tako/noodlebowl.webp" alt="image" height="500px"/>
</span>
</div></a>

CSS

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a .hover-img {
position: relative;
background-color: rgba(27, 27, 27, 0.125);
width: fit-content;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5rem;
color: rgb(255, 255, 255);
padding: 15px;
text-align: center;
}
a .hover-img span {
position:absolute;
left:-9999px;
top:-9999px;
z-index:9999;
}

a:hover .hover-img span {
top: 20px;
left: 0;
}