What would be the best way to recreate this overlapping image?
What would be the best way to recreate this overlapping image? I've tried adding a background color div with 80% height, but that gives some issues on smaller screen sizes
6 Replies
And ofcourse the most accessible way, i don't know if using a fixed 40 rem height is responsive enough and if there are other options
@jordi are you talking about how the image on the right overlaps the muted green background stripe?
@jordi here's how I'd approach this one: https://preview.webflow.com/preview/discord-help-examples?utm_medium=preview_link&utm_source=designer&utm_content=discord-help-examples&preview=e0384d6553f9e791ad454db415c2bc07&pageId=660cb792b2504b903f4b28b5&locale=en&workflow=preview
some things to note:
Is the 1:1 aspect required? I assumed yes since you are showing people and this looks like a "team" page. as a result, it's probably better to use an explicit width for the image (rather than make it responsive with object-fit cover). and let it overflow. If you let the image shrink at 1:1, then you have to deal with competing against text getting longer, which will cause your background color to end up in the wrong space.
I opted for using manual grid because that way we can keep everything "content-aware" i.e. no position absolute and we won't run into any overflow issue but it does bring up challenges for how we want the image to behave.
Anywyays my solution is a bit of a mix of both 🙂
oh wow thanks man, i appreciate it! i was indeed talking about the overlapping image, i'll try to recreate what you did with lumos, should be pretty easy!
i'm going to make a component out of this and letting people change the image based on the text they are writing, so i'm going to use a fixed aspect ratio!
@Web Bae do you have this link? the read only updated and was about to recreate it haha :(
yess, thank you! i've cloned the project so no worries now :D