â–Ľ
Streaming live at 10am (PST)

Div Overlay - Padding

#1

Hello i'm trying to have a "div overlay" on top of an image that matches the size (incuding padding) of the container.

i have set everything right to get the overlay, but the top transparent layer overlaying doesn't take into account its container padding, thus ending with a larger zone than the actual image with the top div.

What do i need to do to make the overlaying layer (div) perfectly match the image size underneath (while keeping the padding?) .
(check the example in the link below.

Regards

Here is my public share link: https://preview.webflow.com/preview/div-overlay-padding?preview=ccceb0cf84804469db3eac6dbe9563a1

#2

Screen Shot 2017-07-18 at 6.45.35 PM.png239x766 19.1 KB
Screen Shot 2017-07-18 at 6.45.23 PM.png240x764 18.3 KB

This will be strange every time you do it, though, if you are manually setting the size of the "div" element. Your best bet would be to not set the size of the div and leave it as auto, then manually size your image and overlay elements.

Although it would be even better to take your div and put your image as a background image of the "overlay" element, then just put an overlay over the background image.

#3

Thank you Cricitem,

i'll be a litte bit more clear about the reasons why i want to do it like this :
I'd like remove the overlay layer when scrolled in view.
Each Div containing the image and overlay is inside a flexbox,
meaning, i need to size the Div to know how much space it will take.

So far i haven't been able to achieve the desired effect with your advice,
there is certainly something i haven't understood.

#4

I think I understand. You want to be able to add an interaction to the overlay on scroll…

Not sure if this helps?

Mark

#5

Thank you Markos84uk for the kind video.
Yes it works that way, i think that’s also what Cricitem suggested.

Nevertheless, problems arise when i resize the elements.
Since it’s a background image, i have no control over the image ratio.

What i’d like with the overlying layers is something like that:
http://putput.dk/
What i’d like to achieve as an overall layout is something in that fashion:

Hence the need of separated divs.

#6

What I suggested wasn’t quite the same, as the overlay would still be a separate element rather than using the overlay tool.

If you want to use an image, create a div… let’s call this “image wrapper”… insert the image into the image wrapper (not as background). Set the image wrapper with relative positioning, then add another div called overlay and give absolute positioning to full. Add background colour to the overlay div and you’re set.

You can now control the ratio of the image. You can copy an paste this and you won’t need to worry about adding a second class.

#7

markos84uk,
I believe I already achieved that in my very first example.

The problem is that i can’t have an overlay that matches the size of the image if i use a padding on the div that contains the overlay and the image.

I’ve updated the example.

#8

Take the div, image and overlay and place that inside another div and add your padding or margin to that.

There are countless ways in Webflow to create the effect on the website you shared. There are some really good tutorials if you Google “Webflow Overlay tutorial” some great content is available.

#9

It works that way thank you!

I did a search before asking the question, unfortunately, none of the examples i found did address that particular issue.

I’ve read also about using border-box to fix that problem.
So far i didn’t manage to make it work properly.

closed #10

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