Hero section with fixed image

[dorik (Doriana Kalaj)]

Hi everyone! I’ve been going crazy for days to recreate this design/interaction.

I’m trying to develop this hero section which has the following elements:

• An image that serves as a background image but does not have a background style.
• A black overlay on the image
• Heading
• Paragraph

The image covers the entire viewport and initially has a fixed position then becomes relative.
Even the heading initially has a fixed position and then becomes absolute once the paragraph “reaches” it.

Here you can find the page and the hero section with the effect I’m trying to recreate: https://www.mcarchitects.it/il-mondo-mca/valori

Any help and suggestions will be well appreciated!

---

Here is my public share link: link

[dorik (Doriana Kalaj)]

Any one can help me with this?

[dennyhartanto]

Hi @dorik,

For the background, you can explore using position: sticky attribute. the Black overlay can be achieved with the “scrolling in view” interactions.

the heading might be achievable with position: sticky too. otherwise it will need custom code. same goes to the paragraph

[Romuald_Jay]

Yes

1. the image is in sticky position at 0 top.
2. everithing relay on the section containing the image : ajust the height tha shoudl be at least two times the hieght of the image.
3. the fade out on the overlay is an simple animation that is triggered when the paragraph scroll out of view.

[dorik (Doriana Kalaj)]

What I see in the code of the current website there are four main elements:

• Image
• Overlay black
• H1
• Paragraph.

Both the image and the H1 initially have a fixed position.
Then, when the user scrolls and the paragraph “reach” the H1, the H1 goes from a fixed to an absolute position.
When both elements, the H1, and paragraph, go out of view the image changes from a fixed to a relative position.
I’ve tried implementing the class adder where I add and remove the position-absolute and position-relative classes with no luck.
This is my read-only: Webflow - mcarchitects

What you are saying is to just use position-sticky instead that position-fixed?

[dorik (Doriana Kalaj)]

What I see in the code of the current website there are four main elements:

• Image
• Overlay black
• H1
• Paragraph.

Both the image and the H1 initially have a fixed position.
Then, when the user scrolls and the paragraph “reach” the H1, the H1 goes from a fixed to an absolute position.
When both elements, the H1, and paragraph, go out of view the image changes from a fixed to a relative position.
I’ve tried implementing the class adder where I add and remove the position-absolute and position-relative classes with no luck.
This is my read-only: Webflow - mcarchitects

What you are saying is to just use position-sticky instead that position-fixed?
[/quote]

What I see in the code of the current website there are four main elements:

• Image
• Overlay black
• H1
• Paragraph.

Both the image and the H1 initially have a fixed position.
Then, when the user scrolls and the paragraph “reach” the H1, the H1 goes from a fixed to an absolute position.
When both elements, the H1, and paragraph, go out of view the image changes from a fixed to a relative position.
I’ve tried implementing the class adder where I add and remove the position-absolute and position-relative classes with no luck.
This is my read-only: Webflow - mcarchitects

What you are saying is to just use position-sticky instead that position-fixed?