Help with flexbox, or best way to achieve the following

Good morning all, @cyberdave

I’m wondering if the following header/slider is possible to make within webflow?

I attempted the following below but I just cant seem to figure it out, I was just wondering if anyone could share some light on this to achieve the the same effect? is it even possible in webflow? Am I doing it wrong with flexbox should I use something else?

Here is my trial

Hi @Matty

Thanks for posting. Here is a quick video I made that shows how you can built his layout.

Regarding the interactions you can refer to this post: How to make background image zoom on hover?

Hope this helps! :slight_smile:

1 Like


Thanks alot Brado!

When using the zoom interaction, the image zooms in about 100mph, I added the transition but doesn’t seem to be working?

Hi @Matty

I think you can fix this by setting a width for the bg image during the non-hover state.

In this example I used 120% on the non-hover and 130% on the hover state. You can switch these if you’d like.

Hope this helps!

Thanks alot @Brando , worked a treat!

Although for some reason my boxes do not align? I’m sure its something simple that I’ve missed but cant work it out.

Hi @Matty

You can fix this by setting “right-div” to float: right

Hope this helps :slight_smile:

@Brando And thats why I love webflow, thank you :slight_smile:

1 Like

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