Scrolling Hero Section

Design help General
1

I would like to create a hero section where the images in the foreground remain the same, but the background images scroll underneath. Is there a way to do this using the slider or is there a better way?

I’ve attached the design to give some reference.

Thanks!

2273×8798 2.27 MB

2

Hi @larryrobinson,

Loving the design :blue_heart:

Yes, there is a way to do exactly what you are wanting:

  • Create a div wrapper (position: relative) that will contain both the slider and the foreground image.
  • Create the slider within the wrapper to your liking with the hero text.
  • Then, add the foreground image within the wrapper as position: absolute and an increased z-index so that it remains in place on the slider.

If you have a Webflow share link I would be happy to show you.

Hopefully this helps :blush:

3

Thanks for the help @micahryanhtml! I’m going to try this and let you know if it work!