Streaming live at 10am (PST)

How to make an image to be fixed inside the div-block that has Overflow: hidden


#1

Hello! I have a non-standard question. I need the image inside the div-block to be fixed. It is necessary that when moving the div-block, this image does not change its position.

If I fixed the image on the page, overflow: hidden of the parent element disappears.

I need your help. Maybe there is a code? Your any ideas


I think this question does not require an ready-online link. But if you need it, please let me know .


#2

Hi @Bogette ! Please share your read-only link so I can take a look.


#3

Hey, @donaldsv

https://preview.webflow.com/preview/warmth-webflow?utm_source=warmth-webflow&preview=c5704258dbda17038e9befad768b6d5b


#4

Thanks! So you can just remove your image and add it back as a background image to the div block with position fixed like so

Result:
CloudApp


#5

Do not scroll the page, @donaldsv ! You do not understand much what I need. Hover your mouse over this text. You should see that the div block moves to 80vh above.

It is necessary that the image when moving the div block was fixed and did not move. To the image had only one position. Fixed position.

*I need a hover interaction.


https://preview.webflow.com/preview/warmth-webflow?utm_source=warmth-webflow&preview=3e27899806339d2f1aef3b8f494bf5da

Creating a parallax effect. As if the div are passing through this image. Do you understand what I mean?

Of course, I could make a reverse position for the image, but this creates another problem in the interaction. Therefore, I would like to find a way to fixed the image, and at the same time, that the parent does not lose overflow hidden