Streaming live at 10am (PST)

Help with this hover animation widget


#1

Hello Guys,

I am currently working on a site for a client from their wireframe, and one of their requests is the following:

http://imgur.com/3MKjkow (image upload wasn't working)

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! :slightly_smiling:

Thank you,
Danny.


#2

@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%.

Maybe it's not that simple?

Zack @ MetaFlare


#3

Hi Zack,

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.

Thanks,
Danny


#4

Hi,
I created a really simple way you could make this work. You can see it here: https://preview.webflow.com/preview/cheyl-solutions?preview=5de3950be01cac4aff5167e5c9dfb2e0

It's crude. I used dots for icons, but other than that, it works like you seem to be asking for.

Rather than explaining the structure, you can look at it on the shared link. Let me know if you have any questions.

Good luck!


#5

Thank you so much @ctotty - using your method I have been able to get it to work pretty much exactly as I wanted!

Check it out here at the bottom of the page - http://ultimate-guide-to-feng-shui.webflow.io/

Again, thanks so much!

Danny.


#6

I'm so glad it helped! Your site looks great!!


#7

Nice! That's pretty nifty. I like the whole site!


#8

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