Overlay not covering width of Div

[stevenworrell85 (Steven Worrell)]

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

[Siton_Systems (Ezra Siton)]

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

[stevenworrell85 (Steven Worrell)]

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?

[Siton_Systems (Ezra Siton)]

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;

Absolute Positioning Inside Relative Positioning | CSS-Tricks

[stevenworrell85 (Steven Worrell)]

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.