Help with flexbox, or best way to achieve the following

Design help General
1

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

https://preview.webflow.com/preview/flextest-3d0849?preview=91a26309c98524089f0e673fdff2f243

2

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
3

@Brando

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?

4

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!

5

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.

https://preview.webflow.com/preview/flextest-3d0849-f0b9a5bc9-d13cc22d7ab49?preview=432962f598f944833438556db8540f8e

6

Hi @Matty

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

Hope this helps :slight_smile:

7

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

1 Like
8

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