Expanding columns

Hello,

So I am trying to achieve functionality that is similar to this:

I want to have three columns that on hover will expand with more information.

I dug through the forums to see if there was something similar I could use as a general guideline, but I don’t think I am setting it up correctly. Any help would be greatly appreciated!

Hello @LaraLoo!
Interesting idea :smiley:. I would try to put few divs (like a columns) and use interaction on hover where would be 2 steps: change width (%) of current hovered div and change width (%) of other divs.

Hope it helps.
Good luck,
Anna.

So I started to build this based on a column structure and am trying to figure out how to get the hover interactions to work.

Here is the link: https://preview.webflow.com/preview/cldhcpprototype?preview=67528b15ff7d8cbfc630339a5a5f3ac8

A couple of things:

The interaction on the first panel is exactly what I want to happen however, I noticed that the third panel is not full width like it is on the first panel - not sure why it is giving me that margin?

When you roll over the second and third panels, it just shifts everything to the left but I want it contract the panels like it does on the first panel hover.

Any help would be greatly appreciated. :smile:

I am sorry, looks like it is impossible to recreate for now :frowning:
If you using row with columns it will shrink row when columns is shrinking. And if you using divs it doesn’t work well with %…
I am sorry

No problem! Thanks for the input though. :smile:

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