Hover icon/text to popup more information?

Design help General
1

Hey all, learning webflow, going okay so far. I am now trying to mimic something I saw on a site to learn how to do it.

Basically there’s an Icon, when you hover over it the icon disappears and a text box appears in the same spot.

The page in question does it with a list some how.

I am not using an icon but rather text…and if possible I wanted to use a collection (though I believe collection won’t work and I will have to manually input each item)

Here’s the site I am trying to mimic: https://pantheonmmo.com/ (classes section)

(You can see on the sep test page where I was trying to get it to work without collection…couldn’t get that to work right either)

Here is my site Read-Only: LINK

2

Hi,

I think it’s something you can do using the interactions:
Create an interaction that is triggered when you hover a collection item and use the Hide/Show action.
You could also add an opacity action for a better transition.

https://cl.ly/1E13370q371P

https://cl.ly/30461e1f3Y0Q

https://cl.ly/1Y3J12330i3E

3

Ahhh I was not setting initial states…super confused on that. I will work on it some more thanks!!

Giving me so much fits I am not understanding interactions that well…need to keep looking at more tutorials.

Also I wanted that whole background rectangle to be non visible and only the H1 visible and when hovering the whole box and text inside appears.

I can’t seem to make the switch it’s just blinking :frowning: see sample Home page copy)

4

Put your Bg in a separate div (Set div to absolute → full) then you will be able to interact with it. I would also suggest putting the text you want to see when hovering inside this div.

5

Yeah I have no clue what I am doing lol…it just keeps blinking on and off when I mouse over it. I can get it working with just show hide click but not the hover…

I will look at it tomorrow…will watch some more videos.

6

Here’s a demo I quickly made. It might help you. You can clone it.

https://webflow.com/website/Dynamic-collection-hover-interaction?s=demo-hover-card

7

Finally got it to work but if I had to reproduce this… LOL.

https://webflow.com/design/legends-of-ultima-static

Your example will REALLY help me. Thank you. I have to get to bed…work soon. Will work on it tomorrow. Thanks!

8

Can you tell me why my Collection list won’t got 100% across the screen like yours???

What a mess - but I finally got it just have to format it some more :slight_smile:https://webflow.com/design/legends-of-ultima-static

Thanks!