You’ll see I have elements on this page:
http://edgepetrolshowcase.webflow.io
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)
Can you give me your read-only link? Makes it easier for me to explain to you how you can do it 
Hey Thanks for the help!
https://preview.webflow.com/preview/edgepetrolshowcase?preview=5b4c8671f6a55f6f2e277a0c15ae5a5a
Allright!
Set the div “Goal” to position: relative.
Give the image element (the icon) inside Goal Vector Icon div a class.
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
Set them both to position: absolute and align them so they are overlaying the original title and vector.
Set them both to opacity 0%. and the Goal Vector Hover div a z-index of 3.
Select the Goal div. Add an interaction → hover.
On the first trigger: Affect other element and type in Goal Title Hover. Set hover on to opacity 100% and hover out to 0 %.
Repeat step 7 but type in Goal Vector Hover.
This step should be…Tadaa!
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.
You might need to adjust the position settings on tablet/mobile.
Here’s some screens to make it easier to understand:
Thank you so much for the help! I’ll try this out.
Thanks!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
