Streaming live at 10am (PST)

Image overflow not working with fixed image

When you hover over the text on the right-hand side, I want the image to pop up on 2/3 (left) of the page. I have used overflow to contain the image but it’s not working, it takes up the entire page. HELP!

Hello @Nadine_Banks,

the isssue that you are having is happening because of positioning. When you set an element to be fixed it always refers to the body itself to be his parent. Since your “Image Homepage” Block is already fixed, there’s no need for “Image - Puma " and for " Image - Puma Forever Better” to be fixed as well. Once you set these two images to be absolute, they will respect overflow: none properties of their parent.

However I Noticed that texts, links etc… in your left column are not clickable due to overlay of images only being hidden through opacity rather than actual hide/show animation. I’d recommend adding initial state for " Image Homepage" to be display: none, so you could actually click on elements nested below it. You can manage that through simple interactions and still have the same exact opacity effect only a bit more functional.

Let me know if this helps and if you managed to make it, I’m available for questions, cheers!