How do I make other elements change colour on hover

You’ll see I have elements on this page:

On the 3 petrol goals, I want to make it so that when I hover over the box, both the title and the icon background go green.

Any ideas on how to do this?!

Thank you!

Here is my public share link: LINK
(how to access public share link)

Hi @StudioSixty-One

Can you give me your read-only link? Makes it easier for me to explain to you how you can do it :slight_smile:

Hey Thanks for the help!


  1. Set the div “Goal” to position: relative.

  2. Give the image element (the icon) inside Goal Vector Icon div a class.

  3. Duplicate the Title text and Vector Icons div and style them exactly like the original state, except for their backgrounds, which now will be green. I named them Goal Title Hover and Goal Vector Hover

  4. Set them both to position: absolute and align them so they are overlaying the original title and vector.

  5. Set them both to opacity 0%. and the Goal Vector Hover div a z-index of 3.

  6. Select the Goal div. Add an interaction --> hover.

  7. On the first trigger: Affect other element and type in Goal Title Hover. Set hover on to opacity 100% and hover out to 0 %.

  8. Repeat step 7 but type in Goal Vector Hover.

  9. This step should be…Tadaa! :slight_smile:

  10. When applying the same procedure to the other 2 goal elements, you need to tick either one of the “limit to nested/sibling element”. Try out which one.

  11. You might need to adjust the position settings on tablet/mobile.

Here’s some screens to make it easier to understand:

1 Like

Thank you so much for the help! I’ll try this out.


1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.