Text Overlay When Hovering

Hello, I am trying to add a text overlay effect when hovering over the images that are in a section. I have CSS that changes the opacity when hovering but would like to add the text to show up along with that. When not hovering over the images the text and opacity will not be present. The text and images will link to other pages as well (Example: living landscapes image/text will link to the living landscapes page that has content containing.) Can anyone help me out with this? 

https://tuatara-chipmunk-44f6.squarespace.com/config/pages

The site is private. Can you setup an access password? We can access site easier

@tuanphan thank you for the guide. I set the password up so you are able to view the site. The images and text that I want overlayed is on the content page, but I also want it on the linked pages as well.  Let me know if you have any questions. 

https://tuatara-chipmunk-44f6.squarespace.com/

PW: planetellers

You can add this to Design > Custom CSS

/* Text show on hover */
div#block-c98dd3c145d4fecb1322 {
    opacity: 0;
}
.fe-block-585feb18be6228f5f644:hover + div>div {
    opacity: 1 !important;
}

@tuanphan Hello again, This didn't seem to work for me. I might be doing this incorrectly but when I copied/pasted the code into the CSS nothing happened. I did have CSS where it changed the opacity but when I pasted the above code in, it took that away as well. Any help is appreciated!

On 8/16/2023 at 7:30 AM, brittaneyrose said:

@tuanphan Hello again, This didn't seem to work for me. I might be doing this incorrectly but when I copied/pasted the code into the CSS nothing happened. I did have CSS where it changed the opacity but when I pasted the above code in, it took that away as well. Any help is appreciated!

If you mean top image on homepage, I see it already works here. You try checking in incognito window