Expanding images in columns

Troponin · February 25, 2015, 8:04pm

How do I create a hover interaction on images nested in a column, that expands in width and “pushes” the other images to the side?

Just like this:
http://stopka.cz/en/services

What I’m struggling with is that my images don’t go back to their initial state once I hover out. I would like to use % with all this (not absolut px values).

There’s actually already a thread on this, but nobody replied:

Thanks!

thewonglv · February 27, 2015, 3:21am

Hi @Troponin, This layout is definitely possible with Webflow interactions, but we are experiencing a bug where percentage changes are being converted to pixels by mistake. More info here: http://forum.webflow.com/t/interactions-percentages-are-being-converted-to-pixels/9791

Unfortunately, this wont be possible until the bug is resolved. :-/ Sorry about the trouble!

Troponin · February 27, 2015, 8:05am

Too bad, I’ve spent quiet some time trying to figure it out. Thanks for the info!

Revolution · February 27, 2015, 8:08pm

Perhaps - look at using a series of DIV’s in place of a ROW.

3 DIVs side-by-side = kinda similar to 3 Column ROW.

Troponin · March 1, 2015, 10:35am

I tried that, but tried again after reading your post and it worked! I have no idea what I did different to be honest, but whatever

Struggling with one last thing: How do I get each DIV block to be on top of the other 2 blocks when I hover over it? I set the z-index for every DIV block to 1 when in hover state, but it gives me a “jumpy” output, meaning I hover over the block, it starts to scale in width and suddenly snaps into the width value I entered. Any ideas how to get this smooth?

Thanks again!

Revolution · March 1, 2015, 1:14pm

I would need to see a demo… to understand better.

For me… I have a project that has 6 DIV’s (fixed position).

3 DIV’s are for images (33.3% width)… and each of the 3 have an associated DIV for text (33.3% width).

onClick of the an “image DIV”… it slides it’s associated “text DIV” into view and slides the other 5 DIV’s out of views.

Then it reverses on a 2nd click.

To could adapt this for a onHover as well.

If you have a demo… post a public link and I will take a look.

Troponin · March 1, 2015, 4:08pm

https://webflow.com/design/vtamb-test02?preview=b152e79b1e1502ebe8e7f52c469a1a9d

Here’s the link, Revolution. The left and right DIV behave like I want them to, the middle block is messing up when I hover over it (snaps into position). Thanks!

Revolution · March 3, 2015, 12:09pm

@Troponin - I looked at your project in detail.

I have a project very similar to this.

There’s also the newly released geospace demo
http://geospace.webflow.com

You are using 3 panels that resize onHover.

Here are my recommendations.

This will produce 3 sliding panels that fill 50% of the window for the active window and 33.3% when not active.

Panel Left

class: (div) panel-left, position: fixed left, width: 50%, height: 100vh, z-index: 10

Panel Center

class: (div) panel-center, position: fixed auto margin, width: 50%, height: 100vh, z-index: 20

Panel Right

class: (div) panel-right, position: fixed right, width: 50%, height: 100vh, z-index: 30

Interactions
Panel Left: onLoad - move left: 33.3%
Panel Right: onLoad - move right: 33.3%
Panel Center: onLoad - not required as auto-margin will position the panel for you

Panel Left: onClick - move Panel Left: to Origin, Panel Center: 100% right, panel Right: 100% right
Panel Center: onClick - move Panel Left: Left 100%, Panel Center: To Origin, panel Right: 100% right
Panel Right: onClick - move Panel Left: Left 100%, Panel Center: 166% Left, panel Right: To Origin

Troponin · March 4, 2015, 9:26am

Thanks Revolution!

I didn’t know there’s a webflow demo for geospace - that site is beautiful! That answers alot of questions, I will study that demo in depth.

azaharizaman · March 29, 2015, 6:36pm

That geospace site is awesome!

azaharizaman · March 29, 2015, 6:38pm

Hi, just want to check if this bug has been resolved? Thanks for highlighting this. I thought it was only me.

DragonDon · October 16, 2015, 8:30pm

Hi,

I just tried it and failed. My Divs aren’t lining up at all like they should really.

http://gritty.webflow.io/panels

https://preview.webflow.com/preview/gritty?preview=f510b031e25bc7e285249db67b17a643

Note, the ‘panel page’ is not linked from the home page.

(yeah…taking a break from the other nonsense site)

Revolution · October 17, 2015, 2:59am

Left and Right panels are working but you z-index for Left is lower than Center
that’s why you can’t see it.
your center panel is not position correctly onLoad.
give the center panel a 33% left margin
and change the right panel z-index to 15
you need a 2nd click on the panels to bring the other 2 back onscreen also

DragonDon · October 17, 2015, 11:23am

Oh, was just following your directions above with 10,20 and 30 respectively.

Knew about the return panel click, was leaving till I got the ‘pushing’ click fixed.

Getting closer, thanks!

So I decided to tackle one section behaviour at a time. I focused on the centre panel. Can you explain why it is behaving like it does? What exactly am I telling it to do wrong that it becomes this skinny line instead of the 100% width I say?

Mayorov · October 21, 2015, 10:21am

Hi, I was also concerned about this issue, when we can hope to solve this bug? Thanks.