CSS Coded Transitions not compatible with Animations?

Hi there, I am trying to get a custom CSS code to work that when i hover my mouse over an image, text appears over it. I got it working in the edit tab, but when saved and looked at on the website, the transition doesn't work, the text just appears and stays. I come to find out it's to do with site wide animations being turned on, and when I turned them off, the transition worked perfectly. 

Is there any way at all to turn off animations for individual pages so this will work? Or is there any way around it so that the CSS code will work? The site wide animations need to be on so it's not an option to turn them off. I'm no coding professional, in fact I've never done coding in my life so any help would be greatly appreciated

Which code did you use and what is page url?

On 6/21/2024 at 9:26 AM, tuanphan said:

Which code did you use and what is page url?

Code used was:

@media only screen and (min-width: 640px){

#block-12345 {

opacity: 0;

transition: opacity 1s

}

#block-12345:hover {

opacity: 1;

transition: opacity 1s

}

}

With the blocks being the relevant blocks of text and images.

Page URL is https://irishmethodist.org/imyc-volunteer

#block-12345 doesn't exist in Squarespace. You can check again.

If you don't know how to find Block ID, you can follow this post

On 6/29/2024 at 9:06 AM, tuanphan said:

#block-12345 doesn't exist in Squarespace. You can check again.

If you don't know how to find Block ID, you can follow this post

 

Yes I am aware, the #block-12345 is a placeholder for the blocks that will be used in the code, as I plan to use this code multiple times. I know how to find the block numbers and can input them into the code appropriately but thank you for the link to the post. 

Is there any way to have this code do the transition on hover when the animations are turned on site wide? It won't work when animations are on but they need to be on

You can post exact code you used, we can check problem easier.