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

9 hours ago, colettechidalek said:

On one of my site pages (about> our team), I used code to add a hover effect to my images, making a description pop up over top of them on hover. I turned on the slide animation for the entire site, which I love, but now the hover effect that I coded isn't working. The captions are stuck on top of the images. Here is my code for that: 

@media only screen and (min-width: 640px){ 
#block-yui_3_17_2_1_1700433448975_88823,
#block-b3a8d141337d28fc8dac,
#block-e201443168bc3fb33650,
#block-95ce9d7ecead7df12d0b,
#block-b0b3ce22dfddeb131971,
#block-80ca1f7c9cdc22af53ed,
#block-43d3696907efd83f1849,
#block-baa797df80ffc7dac9c5,
#block-5d0f74d064d6cd26a374,
#block-706ed77a704a6e2af228,
#block-ab301a749ff385a2b414,
#block-1d84d9c3b113f6f98b9e,
#block-f217141f4dfbbfdef641,
#block-c36643b5a5732649134f,
#block-9ff1a32d59d4aa64e6cf,
#block-d8c9cdf4adc5e7c59ad5,
#block-111874af334cce30f2c9,
#block-b63d79c0aedb79ac30b0 { 
opacity: 0; 
transition: opacity .5s 
} 

#block-yui_3_17_2_1_1700433448975_88823:hover,
#block-b3a8d141337d28fc8dac:hover,
#block-e201443168bc3fb33650:hover,
#block-95ce9d7ecead7df12d0b:hover,
#block-b0b3ce22dfddeb131971:hover,
#block-80ca1f7c9cdc22af53ed:hover,
#block-43d3696907efd83f1849:hover,
#block-baa797df80ffc7dac9c5:hover,
#block-5d0f74d064d6cd26a374:hover,
#block-706ed77a704a6e2af228:hover,
#block-ab301a749ff385a2b414:hover,
#block-1d84d9c3b113f6f98b9e:hover,
#block-f217141f4dfbbfdef641:hover,
#block-c36643b5a5732649134f:hover,
#block-9ff1a32d59d4aa64e6cf:hover,
#block-d8c9cdf4adc5e7c59ad5:hover,
#block-111874af334cce30f2c9:hover,
#block-b63d79c0aedb79ac30b0:hover { 
opacity: 1; 
transition: opacity .5s 
} 
}

Is there something I can do to make it work again?

Can you send your website URL?

it's callahealth.org, but I changed the team page for now until I figure out a solution to my coding hover effects issue

2 hours ago, colettechidalek said:

it's callahealth.org, but I changed the team page for now until I figure out a solution to my coding hover effects issue

I need to check the page to find a solution. Can you send me the page link with make it password protected?

I'm having the same issue was a fix ever found?

im having the same issue was a fix ever found. if so can you post it please, thank you.