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!
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.
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.
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.
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.
