Streaming live at 10am (PST)

Overlay not covering width of Div

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

This is how I have it set up:

I just want the overlay to cover the image like I have on the home screen.


Here is my site Read-Only:

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

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?


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;
1 Like

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.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.