Design/ Code Slider like on Webflow Home page

Design help General
1

Hi Guys,

I was wondering how you could achieve the design and code slider thing as on the webflow home page, I guess it is not possible directly within webflow, but is there a reasonably simple way to do it in code?

1060×607 272 KB

Thanks,

Arthur

2

You can do it using Webflow Interactions. You can create two absolute positioned divs with backgrounds as these images or you can absolute position these two images on top of each other. Then create a hover trigger on both that will affect the left image (or the image on top). It will change it from 50% width to 100% width with a transition. Hover trigger on the image underneath will move that same image from 50% to 0%. You’d have to play with setting widths and having overflow set to none.

BLAM! Have fun!

1 Like
3

Great! thanks a lot, this is realy helpful!

4

I am trying to achieve this effect as well but having a hard time completely understanding Sergie’s suggestion. Can you give any more details on how to set this up? Maybe share a public link of this working so i can study it a bit?

Thanks in advanced for the help.

thanks

5

@bryantay I think that Sergie’s suggestion creates a slider where you have 2 images, and if you hover over one of them it becomes full but if you hover over the other that one becomes full, it will not follow the curser around as on the Webflow homepage.

6

This is correct. You need custom javascript to create that kind of interaction.