CSS hover over image does not work pls help

Hi,

There is an "ongoing project" page on my website and I created 3 images and added a text on top, in the hopes that when a user hover over the image, a text will pop up. I was also hoping to create a hyperlink on the text so each image they click takes them to a gallery.

However, I can't seem to attach a link into the text box.

I also added in the code for the hover, which works when I hover while EDITING the webpage, but when I preview it, it just shows a static image.

Here is the pictures for reference:

This is what I want it to look like, the image are showing first unless u hover the image, then the text box will appear:

However, when I go to preview, this is what it shows:

This is the code that I have put in so far:

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

#block-yui_3_17_2_1_1697400011904_19353:hover {
opacity: 1;
transition: opacity 1s
}
}@media only screen and (min-width: 640px){
#block-0621c99dd9acef85aed1 {
opacity: 0;
 transition: opacity 1s
}

#block-0621c99dd9acef85aed1:hover {
opacity: 1;
transition: opacity 1s
}
}
@media only screen and (min-width: 640px){
#block-4b94192b9870dd1aa56e {
opacity: 0;
 transition: opacity 1s
}

#block-4b94192b9870dd1aa56e:hover {
opacity: 1;
transition: opacity 1s
}

PLEASE HELP!!! 😞 this is driving me insane.

The password for the website is: brownie10

Website: 70-50design.ca/ongoing-projects

Also please help in terms of the textbox as i can't seem to hyperlink the gallery into it, nothing happens!!!

Thank you so much in advance.

To make both image + overlay + text clickable, don't remove any code in your current code, add this to Custom CSS

/* Clickable */
.fe-block-yui_3_17_2_1_1697400011904_19353, .fe-block-0621c99dd9acef85aed1, .fe-block-4b94192b9870dd1aa56e {
	pointer-events: none;
}