Absolute div with text, inside of a grid is jumping to a static div

Design help General
1

So I’m making a grid with information squares. The idea is to either click or hover, depending on the device, and then to get a div with a text that explains.

All items are static, the grid is in a div that’s relative. Inside each square div is a text-div with the explanation text, its absolute and centered.

On screen all looks correct, I then add interaction to hide/show on click or hover.

The text div shows in the static square div if the mouse is held there, if I hover outside the square, the text div appears in the correct centered place.

Ive tried different ways with absolute, relative, interactions.

*Trying without CMS.
Any ideas on fixes?

( also suggestions on functions so that if the interaction is show the text-div on click, I want it so that if I click another square, the previous one “closes”, is that possible without CMS ? )

Xnip2025-06-02_11-59-39
Xnip2025-06-02_11-59-391548×754 123 KB

Xnip2025-06-02_11-59-28
Xnip2025-06-02_11-59-281976×692 144 KB

Here is my site Read-Only: Webflow - FLÖ∆E

2

Hi there,

Here’s how to set up your click and hover interactions:

For click interactions:

  1. Select your square as the trigger element
  2. Add a Mouse Click action
  3. Select the text div you want to show/hide
  4. In Timed Actions, set the initial state to “none”
  5. Add a second action to display it as “Block”

For hover interactions:

  1. Select your Link Block as the trigger element
  2. Choose Mouse Hover from the Element Trigger menu
  3. Set up your hover in/out animations using the Move action
  4. Adjust the timing settings as needed

To make elements hide when clicking others, duplicate your trigger elements and configure their display settings to show/hide appropriately on click.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hey @hammerschmidt,

I believe currently the extend-text-div is not styled in a way that you want it to appear (i.e. it’s not at the center of the screen with absolute positioning, instead it appears in the same box visually adjacent to the title text). You could wrap this div in a div block and apply the style settings that you want to make sure visually it appears in that way (using absolute positioning and flex box properties) and hide it by default. And have a simple interaction to display that element on hovering of the parent element and hide it on hover out animation.

You had mentioned in the post that you did exactly that but when I view the preview link, it does not seem that way. Have you made changes in the meanwhile?

Let me know, if it still does not work once you have styled the overlay element the way you want and have tested it out.

4

Hi aj-dev. Yeah i had made some changes. But i had also tried with wrapping the div in a block with absolute pos and center it, then hid it. But i still got the same problem that
when i pressed the interaction the box showed in the center and worked but if the mouse was held over the “square” interaction, the text box showed over that area aswell, even tho that box was static..

I made new workaround so i mad a flex div, stacked. And made the cards as before but the interaction using the dropdown element inside.
The dropdown displays the text, and it auto closes the previous card if a new one is pressed.

So no interactions, no headaches.

1 Like