hero section design
Hey, what would be the best way to go about this sort of design for a hero section where the image intentionally overflows the container as shown in the image? Would it be setting a max height on the container or perhaps a property on the image? I’d much appreciate any insight, many thanks! (Sorry for the poor quality image haha, I had to draw it on phone)
16 Replies
I have something similar in a project I'm working on and I am using position absolute to remove it from the flow.
this is probably not the best grid solution but here you go https://codepen.io/MannixMD/pen/ZEVxJGJ
awesome, i'll check both methods out, thank you!
You can also try putting on negative margin
Did not know it works so well.
That’s interesting, putting a negative margin on what element?
On the element that you want to overflows, let’s say
img {
margin-bottom: -3rem;
}
Wouldn’t that affect the alignment of the text and image?
Let’s stay you display flex your hero where you put two containers, than no
oh i see, i'll try it out
Lmk how it went
will do
You could add
position: relative to the image and shift it down with top. You could also do a transform: translateY().Yeah I could do, but it’d affect the alignment with the image would it not?
It will hinder responsiveness the best solution is with grid
Yeah I was thinking the same thing
I’ll check that out, thank you!