Turn off site-wide animation for a section

I'd like to turn off the site-wide animation to one of the sections on my home page because the site-wide animation overrides the hover effect I created for the texts I placed on top of the three images that are next to each other (Kentfield Color, Sea Cliff Redo, and Piedmont Chic).  The text is supposed to have a hover effect when you put your cursor over the image, but with the animation on it shows the text/ removes the hover effect. I tried using the below code on one of the texts (Kentfield Color) but it did not remove the animation. 

#block-yui_3_17_2_1_1687371703623_38666 * {

    transform: unset !important;
    transition: unset !important; 
    transition-delay: unset !important;

}

The password to the website is: smile

www.caitlinjonesdesign.com

Use this code instead

.fe-649348b948086c7508143792 * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}

tuanphan Hey there! Is it possible to turn off animations on just one section? I have a carousal in place, and the slide up animation is showing up very weird. I wanted to use this code above, but mine is a section, not a block for the #id. 

The section ID is section[data-section-id="660c3291acc78b3798e99a21"] 

Thank you!
Cass

On 4/12/2024 at 3:53 AM, CassidyWierks said:

tuanphan Hey there! Is it possible to turn off animations on just one section? I have a carousal in place, and the slide up animation is showing up very weird. I wanted to use this code above, but mine is a section, not a block for the #id. 

The section ID is section[data-section-id="660c3291acc78b3798e99a21"] 

Thank you!
Cass

Replace this ID

with this ID

Hello @tuanphan Thank you for the code, however, it also cancelled my hover effect for the section, is there anyway to work around it?

Please see the code if it is easier to work to identify the problem.

    /*Our Approach Hover*/
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1726214381627_31117 {
opacity: 0;
 transition: opacity 1s
}
  }
#block-yui_3_17_2_1_1726214381627_31117:hover {
opacity: 1;
transition: opacity 1s
  }
  }
@media only screen and (min-width: 640px){
#block-a0ce460c57e63becccfa {
opacity: 0;
 transition: opacity 1s
}

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

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

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

#block-yui_3_17_2_1_1726214381627_31117:hover {
opacity: 1;
transition: opacity 1s
  }
  }
section[data-section-id="66e3bfdd07a54c3fa67b5c47"] * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}

On 10/2/2024 at 12:53 PM, lac_cwc said:

Hello @tuanphan Thank you for the code, however, it also cancelled my hover effect for the section, is there anyway to work around it?

 

Please see the code if it is easier to work to identify the problem.

 

    /*Our Approach Hover*/
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1726214381627_31117 {
opacity: 0;
 transition: opacity 1s
}
  }
#block-yui_3_17_2_1_1726214381627_31117:hover {
opacity: 1;
transition: opacity 1s
  }
  }
@media only screen and (min-width: 640px){
#block-a0ce460c57e63becccfa {
opacity: 0;
 transition: opacity 1s
}

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

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

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

#block-yui_3_17_2_1_1726214381627_31117:hover {
opacity: 1;
transition: opacity 1s
  }
  }
section[data-section-id="66e3bfdd07a54c3fa67b5c47"] * {
    transform: unset !important;
    transition: unset !important;
    transition-delay: unset !important;
}

Add !important to your code

for example these lines

opacity: 0;
 transition: opacity 1s

change it to this

opacity: 0 !important;
 transition: opacity 1s !important;

Hi there!

I am having similar problems as CassidyWierks.
I have one section, a footer on the website I designed that would need to be static.
Tried the code that was given above, but it didn't work for me.

The footer is section[data-section-id="67164035705c4d086e6a8755"]

Did I do something wrong or is there any other way to disable the animation for the footer only, not the whole page?
Thank you for your time and help!

Heidi

On 11/15/2024 at 2:02 PM, votreh said:

Hi there!

I am having similar problems as CassidyWierks.
I have one section, a footer on the website I designed that would need to be static.
Tried the code that was given above, but it didn't work for me.

The footer is section[data-section-id="67164035705c4d086e6a8755"]

Did I do something wrong or is there any other way to disable the animation for the footer only, not the whole page?
Thank you for your time and help!

Heidi

You need to add code to Custom CSS box, not Footer Injection

On 11/19/2024 at 12:09 PM, tuanphan said:

You need to add code to Custom CSS box, not Footer Injection

Wonderful, that did the trick!

Thank you so much for your help with this one 🙂
-Heidi