What they require is when you hover over each of the icons, the different text appears underneath. I have been trying to think about how to do it for hours but cannot seem to come to a conclusion. It doesn’t need to look exactly the same but I would like it to be as similar as possible.
They have also provided an image for each of the ‘hover’ states, so not sure if that might help?
If anyone has any suggestions please throw them at me!
@DannyBarnes94 - Sounds like you could use an interaction for this. If I understand, when a user hovers the mouse over an icon, some text appears, and when they stop hovering over it, the text disappears, right?
If so, you could add an interaction to each icon. Each interaction would have a Hover trigger, and would affect a different element (the piece of text you want to appear/disappear). The default opacity for the text is 0%. On Hover Over, have the text ramp up to opacity 100%. When not hovering, set the opacity back to 0%.
Thanks for your response. Unfortunately it’s not that simple, what I’m finding difficult is the shape of the element that they want. They want this compass shape as you can see in the below image:
As you hover over each section then that section changes colour and the text below is then updated.
My only thought was that I could do this with some custom image mapping code, but even then I’m not sure how I would activate the interactions as normally image mapping is just used to link to different pages/areas.
