Smartly overlapped section with the one above
Hi!
I have a front-end challenge for a position im applying, im almost finish but there's one section I just can get right because to make it dynamic with the content that can be variable it's very tricky.
Can I get some help on how to create this? I need to deliver today
Here are the specs:
- In desktop, the overlapped section is overlapped by 50%
- In mobile is overlapped by another amount that is not necessary to be precise
- There's a background that grows and shrinks depending on the overlapped content which is not overlapped
5 Replies
I've tried with transform, absolute, negative margin etc.. but none give me the exact result
Thanks for the reply!
I thought about this but my main problem is the background that wraps the bottom of overlapped card
Do you have a codepen to illustrate the code you have already ?
te easiest way is to have a container containing the card, so the container has a padding and a gradient like:
--stop: 20%;
background-image: linear-gradient(transparent var(--stop), green var(--stop));
then you also can change the stop on different media queries