Streaming live at 10am (PST)

Image Formatting Help


#1

Hi,

I wanted to do sort of an overlay setup where when you hover over one of the posts/projects on my web page it displays a featured/preview image. I managed to get the image to appear on hover just fine, but I believe because it is fixed the image moves as a user scrolls through the site. I was wondering if anyone knew of a way to have this same effect without using the Fixed display method. Or maybe I’m just implementing Fixed display method improperly. Thank you for your help!


Here is my public share link: https://preview.webflow.com/preview/to-humankind?utm_source=to-humankind&preview=602597b92e757fc39b744982c3c4c340


#2

I think you should try and use absolute rather than fixed. This is because the fixed means that the body becomes the parent while if you use absolute it will treat it’s parent as a parent.

e.g

You have a div block inside a section. make the section relative and the div absolute and design it however you want.

But i’m not sure if it’ll work or not

Edit: I tried and it worked.


#3

I used absolute positioning instead as suggested, but I am wondering if maybe I am positioning something incorrectly because the images are out of place when previewing the website live vs. in the designer.


#4

Is this the photo you’re talking about?

And you want them to look like this?


#5

Yeah it is! I want it to be better aligned like the image for my work. Because right now when I edit in Designer it looks different than my live site. I think maybe the positioning is shifted off somewhere.


#6

I am trying to see if I can possibly center the image within the section so there’s proper spacing, but I wasn’t sure if that was possible since the images have the Absolute attribute.


#7

So the example here is what you want to achieve?


#8

Yes that’s exactly what I want!


#9

Give me a minute to record my screen and share with you :slight_smile:


#10

Thank you so much! You’re a lifesaver.


#11

Here a link to the screen record > https://www.useloom.com/share/359176d4611743c98dc20a747aed80c0

If you have more questions feel free to reach out

Piter :webflow_heart:


#12

I just followed your video and it was exactly what I needed!! Thank you so much it worked perfectly!


#13

Happy to help! :webflow_heart: