▼
Streaming live at 10am (PST)

Overlay not covering width of Div

Design help General
#1

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.

18
Screen Shot 2018-02-13 at 16.00.18.png794×792 388 KB

This is how I have it set up:

23
Screen Shot 2018-02-13 at 16.01.23.png472×1012 31.1 KB

But when I try and do the same thing on another page, 100% width seems to extend past the boundary of the div block:

28
Screen Shot 2018-02-13 at 16.03.28.png668×646 222 KB

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:
31

41
Screen Shot 2018-02-13 at 16.03.41.png458×612 17.2 KB

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

#2

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

#3

Thanks for the reply. I think I tried this already.

I changed to 10 and it overlaps the edges on both sides, like so:
19

Does that make sense?

#4

Again.

Absolute VS relative. Add position relative to this element

image
image.jpg253×721 55.6 KB

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
#5

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.

#6

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