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)
No description
16 Replies
ntkunz
ntkunz14mo ago
I have something similar in a project I'm working on and I am using position absolute to remove it from the flow.
Mannix
Mannix14mo ago
this is probably not the best grid solution but here you go https://codepen.io/MannixMD/pen/ZEVxJGJ
snxxwyy
snxxwyy14mo ago
awesome, i'll check both methods out, thank you!
VIG | Podnikatel33
You can also try putting on negative margin Did not know it works so well.
snxxwyy
snxxwyy14mo ago
That’s interesting, putting a negative margin on what element?
VIG | Podnikatel33
On the element that you want to overflows, let’s say img { margin-bottom: -3rem; }
snxxwyy
snxxwyy14mo ago
Wouldn’t that affect the alignment of the text and image?
VIG | Podnikatel33
Let’s stay you display flex your hero where you put two containers, than no
snxxwyy
snxxwyy14mo ago
oh i see, i'll try it out
VIG | Podnikatel33
Lmk how it went
snxxwyy
snxxwyy14mo ago
will do
briancross
briancross14mo ago
You could add position: relative to the image and shift it down with top. You could also do a transform: translateY().
snxxwyy
snxxwyy14mo ago
Yeah I could do, but it’d affect the alignment with the image would it not?
Hashir Akbar
Hashir Akbar14mo ago
It will hinder responsiveness the best solution is with grid
snxxwyy
snxxwyy14mo ago
Yeah I was thinking the same thing I’ll check that out, thank you!
Want results from more Discord servers?
Add your server