Change Color of element when different element is hovered

I am trying to achieve on this page here – http://derbyshiregas.co.uk/ on the HOME PAGE within the OUR SERVICES section.

That when hovering over a services box both the text and the fa-icon/font awesome icon change colour on hover. I have got the text working but cannot get it working with the icon as well.

If someone could give us a little help with the CSS code I need to use for this it would be a big help.

Below is the current code I am using for the text… just cant get the fa-icon working with this.

.service-nav-tab li a:hover, .service-nav-tab li.active a {
background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
background-size: 400% 400%;
animation: BackgroundGradient 40s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Read more here:: Change Color of element when different element is hovered

Leave a Reply

Your email address will not be published. Required fields are marked *