Streaming live at 10am (PST)

Expanding columns


#1

Hello,

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

http://outdatedbrowser.com/en

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!


#2

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.


#3

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


#4

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


#5

No problem! Thanks for the input though. smile


#6

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