How to create these effects

Community resources General
1

Hi all,

I’m getting started with webflow and I would like to create some effects like on this website:
https://www.absbouwteam.be

  • when you scroll down on the homepage the second ‘section’ kind of gets over the image
  • the sticky header: when I tried it in webflow it does not work with only putting it on “sticky”
  • when you scroll down a bit on the homepage and hover over the images ‘villabouw op maat’ the image comes a bit forward

Could anyone tell me how to do these 3? I was looking to do it with “interactions” but I might be missing out here.

Thank you

2

Hey,

the first effect is an illusion made by having a background image on the hero-section set to “fixed”.

The second effect is made by doing the following:

  • Use a div block as a wrapper with “overflow: hidden”
  • Add an image inside the wrapper
  • Add an “on hover” interaction on the image and scale it up a few pixels

:slight_smile: