Streaming live at 10am (PST)

Replicate a Div Block with Absolute Image


I’m replicating this website and have gotten almost all of it except for a set of Div blocks in a grid, found at the bottom of the page under “Grow Your Lines of Business”.

When I inspect the page, I see that the image is 127x127, and that it’s set to an Absolute position. When I do this same setup on my Webflow page, the image runs over my text. I can probably just resize the image, but I’m wondering what I’m missing at a foundational/conceptual level - any thoughts?

Thank you in advance!

Here is my site Read-Only: Webflow - Recruiter

hi @Kate_V I have made a short video about your request.

1 Like

Wow Stan, I can’t thank you enough! This was wonderfully explanatory and has helped me understand more about what I’m looking at here.

What I’m not quite sure of though is how the real webpage class was set to Flex and the image was set to Absolute without it overlapping like I was experiencing. I had it set like that because that’s what I saw in the original CSS. The alternative of setting it to Block and setting the image to Relative creates much more of a border than the original design

1 Like

hi @Kate_V there is always 100 ways how to achieve identical result and I’ve showed you one of these I thought is more natural for this simple card element. To your question about absolute image position.

when you look on code they have set card height to absolute number 260px then set flex to justify-content: flex-end; that push text to bottom and in free space on top they add image to absolute . I it is one of the way how you can style this simple card. In this case it is imho overkill to do this way but maybe is the one you need.

if you do not have other question to original topic feel free to close your request.