Hover text over image - clickthrough URL not working

https://aqua-owl-8hp7.squarespace.com/
pw: renfuller2023

I want to have an image lead to a different page via a hover text link.

Currently I have the images as my starting block. Over that I have a text block and use this code for the hover effect:

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1684378901582_3328 {
opacity: 0;
 transition: opacity .5s
}

#block-yui_3_17_2_1_1684378901582_3328:hover {
opacity: 1;
  transition: opacity .5s }
}

It works great, but it makes the image not clickable. I've tried putting the URL both on the image block and the text block. It seems like the hover code wipes out the link.

Is there a work around for this?

Thank you!

I was able to figure it out. Instead of having my image block below the text block, I switched the order.

in the block ID, i changed it to my image block id, and switched the opacity to start at 1 (full image block) and the second opacity I set at .3, so that the text block becomes visible underneath the image.

Did you solve or still need help?