Hero section with background clipping.
Hi everyone,
I have Figma design, that i have hard time wrapping my head around. Ill be really happy if someone is able to nudge me in the right direction for this. I consider myself to be an intermediate at Webflow, but i haven't done layouts this complex before and have been stuck on how exactly i should implement this.
Explanation of the problem and a few ideas can be found in the Figma file.
Ideally everything should be achieved natively in Webflow.
PS
This is a task realated to a job interview. I want to point out that i don't to cheat with providing someone else's solution. I want to understand the problem better and hopefully be able to implement the solution on my own.
Here's the Figma link for the design.- https://www.figma.com/file/hzkvKPig9boVr5fDuBBKRV/%2312-Permagold-Section-Test-(Copy)?type=design&node-id=0%3A1&mode=design&t=WDtcjg8vEZ1p98Lm-1
And the initial setup in Webflow - https://preview.webflow.com/preview/mehmeds-fresh-site?utm_medium=preview_link&utm_source=designer&utm_content=mehmeds-fresh-site&preview=dad2278e937a06ba80299322899497f8&workflow=preview
2 Replies
is it required to use some sort of clipping or jsut an idea? I think this would actually be easier to build by exporting the image as individual shapes (one for each "row") from figma and just manually place everything in one grid.
especially since there are two images at play here overlapping each other you'd go crazy trying to clip and do inverse border effects I would think
maybe there's a big brain way to do it with clipping but I think overall way easier to prepare the assets in figma and get them into webflow that way
i dont think there is any specific requirement
the only info i have is what's posted in the figma file
that was my biggest struggle exactly, my head started hurting just from trying to figure it out
Clipping the is posted as an "idea", by the creator of the task, but if there is an easier way to do it that would achieve the same result i would be happy to know more