Changing section background color on hover

Is it possible to change section background color on hover with smooth transition? In my case, I also have dividers enabled.

I tried targeting all kinds of selectors, but none seems to work.

Desired effect:
 

Normal:

On hover:

1 hour ago, creedon said:

Please see the following for a start on your effect.

Let us know how it goes.

Thank you. Almost there except for this weird issue:

When I enter the code in Custom CSS, it gives me Syntax Error on line containing --siteBackgroundColor

If you don't mind, one more question about smooth transition. I used the following code:

section[data-section-id="64d3cfe46593f86d84a5243a"]:not(.has-background):hover .section-background {
--siteBackgroundColor: red;
}
section[data-section-id="64d3cfe46593f86d84a5243a"]:not(.has-background) .section-background {
transition: all .5s ease-in-out;
}

Is there a different property I could use instead of all in transition: all .5s ease-in-out?

Thanks.

Quote

When I enter the code in Custom CSS, it gives me Syntax Error on line containing --siteBackgroundColor

I updated my referenced post. Apparently SS is blocking the use of their CSS variables in the editor.

Quote

Is there a different property I could use instead of all in transition: all .5s ease-in-out?

Try...

transition : background-color 0.5s ease-in-out;

after you fix the other issue.

1 hour ago, creedon said:

I updated my referenced post. Apparently SS is blocking the use of their CSS variables in the editor.

Thanks so much! Yeah, I've noticed Global CSS blocks the use of variables. But if you use individual page's HTML editor, variables work just fine. Nonetheless, I still replaced --siteBackgroundColor with background-color.

55 minutes ago, pro said:

I've noticed Global CSS blocks the use of variables. But if you use individual page's HTML editor, variables work just fine.

Custom CSS uses the LESS preprocessor, an ancient version from years ago that hasn't kept up with modern CSS standards. The other injection areas do not use LESS.

19 minutes ago, creedon said:

Custom CSS uses the LESS preprocessor, an ancient version from years ago that hasn't kept up with modern CSS standards. The other injection areas do not use LESS.

Ah, interesting. I didn't know that. 

@creedon This is great and I have my background changing gradually. 

How though do I change HR, H2, P1, P2 and P3 copy? Also can you change icons?

Any help gratefully received: https://sixmileshigh.com/hometest