Trouble overlapping shape on sections before and after it
Hello everyone, I had a quick question.
Below is a section with a circular image that overlaps the section above and below it. I aim to recreat this in webflow.
I've spent the last hour trying to make it work and I am wondering if it is possible.
I attached what I have already. The bottom of the circle goes over the bottom panel but the top part does not. I assume because it is first in the source code... Trying to think how i would get the top part of the circle over the panel before that. Any suggestions?
RO Link: https://preview.webflow.com/preview/mbongiyaubuntu?utm_medium=preview_link&utm_source=designer&utm_content=mbongiyaubuntu&preview=90ad04406ba4ac0e4832d4a1104a5c27&pageId=65ef7083b408a3d16d627f05&workflow=preview
17 Replies
@staybalanced here's how Iwould tackle it
https://preview.webflow.com/preview/discord-help-examples?utm_medium=preview_link&utm_source=designer&utm_content=discord-help-examples&preview=e0384d6553f9e791ad454db415c2bc07&workflow=preview
uses some negative margin on the image (which has to be accounted for witht the content div... pull it up, and the width of the circle... the calc(50% + 6rem) custom css property). Variables would be great for this but since they don't change across breakpoints it's actually not ideal.
not sure how you wanted it to show on mobile so I just slapped something together
I just opted for a blending mode on the "A am because we are" text but you might prefer to style it more deliberately with a span.
Thank you @Web Bae , that looks great, I really hope with practice I can get as fast and as skilled as you I will give that a shot.
also on a related note @Web Bae i need to get faster with webflow, and dont want to be bothered with designing first since that also takes time.
I had an idea to implement designs from frontendmentor.io....but what other suggestions would you have practicing a layout a day .... maybe manually create layouts from dribble shots...
yea recreating dribble shots is 100% a great way
clients always come with wacky designs... it can be so challenging!
Kevin Powell has good youtube content on tricky html/css too, you might check him out
awesome, thank you!
@staybalanced would it be ok to show the design in a YouTube video?
Thanks for asking Web bae.
But did you mean the work you mocked up or the design i shared... if you meant your design then absolutely go for it.
It would be my design that I build but I would share your design as what inspired the video
Ahh i see, If you meant my design, then no because this probono client is a controlling stickler where I can't even ask others in private forums for help to get their work done because it means they would see it. I'll probably drop them.
But what I could do, is just change the text tho
and then you can use the same design, does that work?
Hmmm I don’t want to put you in a bad spot! Up to you.
I can totally do the video without showing the design. I just like to tell the story when I can 🙂
No it's kinda important to see what you would do with it... I will change the copy..when do you need it
Im gonna film tomorrow probably.
k, ill have it ready in an hour
Haha you rock. I’m also happy to promote you in the intro if you’d like. Usually I keep people anonymous because, you know, privacy haha.
Omg, that would be awesome, thanks a lot. I am starting out and could use the mention haha, please use my real name Dwayne Neckles... I'm humbled for the request - thank you! I'll send it over in png of the design with the copy changed in an hour .... Also if you need the web version too let me know.
I need a few minutes to let sink in what happened lol
@Web Bae See attached, let me know if you need anything else.
