hi guys, I'm looking at tweaking how text links & icon links behave on hover

Hi

website

https://www.goosebumps.marketing 

 

my goal is to get every text link and every icon link in the header + main body of site & footer. So basically every link to fade to a different colour over a period of time when hovered over then back to the original colour when I mouse away

 

this code works for the effect it creates but only on header links & the links in body of text in the accordion on page  https://www.goosebumps.marketing/why-us with the text style p1

p, body header#header, {

  a {

  transition: 0.8s !important;

  }

  a:hover {

  color: rgba(175,175,175,0.3) !important;

    transition: 0.8s;
}

}

 

the 3 main links on my home page circled in blue (see photo 1) in the text style p1 with custom colour #FF04AE for the pink bit the CSS code doesn't create the effect. however if I remake the same link & leave the text colour as standard p1 text, the link behaves as it should with the fading colour. If you look at photo 3  i circled in blue the replicated link for "infectious  DIGITALmarketing" which works with the effect. So the custom colour is causing a barrier somehow, strange because you can choose the same custom colour in site styles..  Also when I use the above code no hover effect is working for the footer icons either?

 

 

 

 

 

 

This code below achieves what I want with every link on my site but without the nice slow transition

a:hover {

  color: rgba(175,175,175,0.3) !important;

}

 

 

however when i add this code at the same time as the 1st longer code it doesn't get the result I'm after

 

Is there a way to combine the 2 sets of code to achieve the goal of all links in all areas to have a slow fade to a different colour then when I mouse off the original colour comes back?

Or the above and the footer icons also fade even a bit when mousing over

 

Moreover may the solution include the form button on the main homepage the one that says "Type your vision" highlighted in blue , see photo 2  

 

the 1st set of code from the top of this message  is currently in place in the custom css 

 

thanks a million for the time anyone can spend to get this solved

 

Danny

 

 

 

Edited February 7 by goosbumps
forgot a couple of details