Reveal Text on Hover

Hi there! I am trying to add a text reveal on image hover to my client's website, and when I add the custom CSS code I can see it working when I'm in the Edit mode, but after I save and exit Edit mode nothing happens... could you help me out to figure out why?

The code I'm using is: 

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

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

Can I assume that you've removed the real block IDs from the code you shared?

Are you trying to target the entire block to fade in/out?

Can you share your website URL and this page?

1. Yes, it's just a generic block ID in the code I shared. I'm using a Chrome extension to find each block's ID, I have multiple images in the section design.

2.  Yes, I want the entire block to face in/out. Basically the idea was that the hover with the text covers the full image.

3. The website is not public yet, so will the link work?

https://vanilla-iguana-re7k.squarespace.com/config/pages

I just added !important to the opacity and it works!! Yay! THANK YOU SO MUCH!! you're the best 🙂

Happy holidays!

5 minutes ago, bbs0013 said:

I just added !important to the opacity and it works!! Yay! THANK YOU SO MUCH!! you're the best 🙂

Happy holidays!

Excellent!