pls help. trying to do a hover to reveal and its working in edit mode but not published site

Hi All,

I was building a hover to reveal interaction by placing an image over an image, then turning the opacity of the block to zero on the image above unless hovered over. (Gif Below)

Its working perfectly in edit mode but not on the published site or in the preview version. 

This is the code I'm using for each block:

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

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

Any ideas?

Hey!

Have you checked it outside of Squarespace? In an incognito window? Because looking at the code it seems correct.

If it's not working outside of Squarespace could you link the page with the password? I can then take a look and see what's up.

It might be an incorrect blockID or you might need to get more specific with the id. Or maybe there is an error in the custom CSS panel, you could have accidentally nested it incorrectly or there might be another code conflict. Just some ideas on troubleshooting but can't tell unless I take a look at your specific site!