Pop up on hover is not hiding when page loads

[Francine_Peretti]

Hello everyone

I am trying to make a pop up show when hovering an element. The problem is: the pop up div is loading with the page, and when you hover out it hides, then works normally. I tried every thing I read in other posts, like I changed the pop up wrapper display to none (when I was using hide/show animation) - then it doesn’t show at all.
I am using the opacity animation, but I’ve tried with hide/show too and it’s the same problem. I chose opacity because it works in other elements in the page, and I can set an easing, hide/show is not allowing easing.
It’s funny because after I hover in then out, it begins to work perfectly, the only problem is that it’s showing when loading the page, and it should be 0 opacity (or hide, when I was using it).

Here’s the read-only link Webflow - Francine Peretti - UX/UI & Visual Designer - UNDER CONSTRUCTION :)

And here’s some prints of the dashboard and interactions so you can see how I configure everything:

Hover in:

Hover out (only one because this is working fine):

This is part of my portfolio, so if you like to give some feedback also, I’d appreciate it too.

Thank you all in advance!

[AJ_Dev (from Memberstack)]

Hey @Francine_Peretti ,

In the Popup 2 hover out animation, you can remove the first action of opacity set to 100 and only have the second action to set it as 0 and save it.

Then you can set the display property of Popup div to anything other than none and test this hover in and hover out interaction. It should work as you expect it to on the preview. Hope this helps.

[Francine_Peretti]

You-are-a-genius!!! It worked!!! Thank you soooooooooo much!

I’m having problems with the pop up position, I’m using absolute to place it right below the circle but it shows anywhere but where I placed it. I don’t know if I’m wrong or webflow is problematic. I’m spending more time trying to fix things than building the website. That’s annoying.

Would you know how to fix this position problem?

Anyway, thank so much for your time. I’m really grateful.

[AJ_Dev (from Memberstack)]

Welcome @Francine_Peretti.

For the positioning, you can test something like this:

• Set the ‘PsO-circle-div-wrapper’ element’s position to ‘Relative’

  

• Reset the left margin and set the absolute positioning for the ‘Popup-wrapper’ element accordingly. For example:

  

  This should give you a closer result of what you want in the preview. Feel free to explore the positioning further as per your design requirements. What I shared is just an idea of getting you started with positioning of the elements. Here’s a more detailed guide on positioning which might help.

[Francine_Peretti]

You just saved me for the 3rd time! Thank you SO much! I couldn’t find that link before, I don’t know how because I’ve searched everywhere. I was probably using the wrong terms… Once again, thank you so sooooo much for your time!