Hi everyone.
I have this annoying issue with a hover overlay. On my home page I have the hover overlay set up perfectly. When you hover over the image the overlay comes up and covers 100% of the height and width.
This is how I have it set up:
But when I try and do the same thing on another page, 100% width seems to extend past the boundary of the div block:
Look through the overlay and You can see that it runs past the edge of the image.
I have bodged it for now but it’s not right. you can see that the overlay is just slightly too small or in some cases slightly too big.
This is how I have it set up:
I just want the overlay to cover the image like I have on the home screen.
Thanks,
Steve
Here is my site Read-Only: https://preview.webflow.com/preview/wozzatestbed?preview=7293b152402f5476358d3a077f301d36
Very simple. The padding r/l of the outer div is 10px but you set left/right to 12px. Change left and right to 10 to solve this.
Anyway, most of the time in overlays you should add “extra” div inside the col grid - then use left/right 0 and that’s it (In your code when you change the padding you get again this issue).
Like this:
column (wrapper) - padding left and right 12px (I am also relative)
— some-div-position relative - “i am the new relative parent”
----- Overlay some-div position absolute
Setting the relative parent
https://university.webflow.com/article/absolute-position
Thanks for the reply. I think I tried this already.
I changed to 10 and it overlaps the edges on both sides, like so:
Does that make sense?
Again.
Absolute VS relative. Add position relative to this element
That’s it. Now the absolute is related to this element (No gap - use zero right-left-top-bottom).
Why? (when you set absolute the position related to this w-col - and you get extra black area - so you should add extra div)
w-col {
position: relative;
Ahhhh thanks. Got it. Still don’t totally understand why it’s worked but I will do some additional learning on that.
Thanks for your help.
