Site Wide Slide Animation disabling hover effect on image block

I am trying to add a site wide slide animation to my website, however on certain pages I have image blocks that have a hover effect that reveals text on hover. This appears to be disabled when I add the animation. Is there a way to remove certain sections from the site wide animation? 

Specific pages are homepage, our services, about us. 

www.sprayfix.co.uk

With hover effect

 Do you use custom code or? If custom code, you can post here? We can tweak it easier

I'm also struggling with this. I have site wide animation of fade applied in site styles but having added text to appear on hover over one image block, the hover doesn't work when the site-wide animation is applied too. The hover is in CSS:

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

I have tried negating the site wide animation for the text block hover and the image block which it appears over, using the following code:

#block-yui_3_17_2_1_1692698593900_29617 * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}
#block-yui_3_17_2_1_1692201007200_20801 * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}

but this didn't work. I also tried negating the site wide animation on the section which the text/image hover block hover is in on the about page, using the following code:

/* About page - disable animation */

div#page-section-646cada82c8594019cdb85c5 * {

    transform: unset !important;

    transition-delay: unset !important;

    transition: unset !important;

}

but this didn't work either. All i want is to have the site-wide animation of fade across the website, but for this not to cancel out the text block hover effect - any help with any way to make this work would be really appreciated - whether that's by negating the site-wide animation on just the relevant hover block or on a section of the page, I don't mind, but nothing is currently working!

Thanks!

On 8/22/2023 at 8:46 PM, Nala2323 said:

I'm also struggling with this. I have site wide animation of fade applied in site styles but having added text to appear on hover over one image block, the hover doesn't work when the site-wide animation is applied too. The hover is in CSS:

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

 

I have tried negating the site wide animation for the text block hover and the image block which it appears over, using the following code:

#block-yui_3_17_2_1_1692698593900_29617 * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}
#block-yui_3_17_2_1_1692201007200_20801 * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}

 

but this didn't work. I also tried negating the site wide animation on the section which the text/image hover block hover is in on the about page, using the following code:

/* About page - disable animation */

div#page-section-646cada82c8594019cdb85c5 * {

    transform: unset !important;

    transition-delay: unset !important;

    transition: unset !important;

}

but this didn't work either. All i want is to have the site-wide animation of fade across the website, but for this not to cancel out the text block hover effect - any help with any way to make this work would be really appreciated - whether that's by negating the site-wide animation on just the relevant hover block or on a section of the page, I don't mind, but nothing is currently working!

Thanks!

Can you share link to page where you have problem? We can check/test code easier