Kevin Powell - Community•2y ago

The best approach for this >>>

I believe this is achievable with CSS...

13 Replies

Jochem•2y ago

"this"? do you mean the yellow shape?

Myndi•2y ago

Asking GPT be like.

vince•2y ago

I'd just learn to do it in photoshop tbh

Corizon•2y ago

@jochemm 😂 sorry, not just the shape. How can I place the image of the people in the shape.

Jochem•2y ago

what are you starting with, a transparent image of just the people?

Corizon•2y ago

Uhmm, it's just a cut out photo of the people. The yellow background is separate from the people. But the people are grouped together Tried overflow hidden on the container which is the yellow background. But it trapped the image inside of it I just want their heads to overflow from the top side of the container while they remain fitted in the container

Jochem•2y ago

you can wrap both the shape and the people in the same wrapper, then position them on top of each other using grid

Corizon•2y ago

@jochemm

css.container{
  display: grid;
}
.image1, .image2{
  grid-column: 1;
  grid-row: 1;
}

css.container{
  display: grid;
}
.image1, .image2{
  grid-column: 1;
  grid-row: 1;
}

I guess this should work

Jochem•2y ago

yeah, that should work. You may have to play with the justify/align-self values you can get the corners on the yellow shape by specifying the values for each corner with border-radius, and if you do the same for the image they should fit together and look like your example image

Corizon•2y ago

Okay, i think I'll have to specify a height to get the justify/align values to work

Jochem•2y ago

I think if you just specify them both to go to the bottom, that should line up the container would stretch to fit the image, so that even should already be at the bottom, then the shape just needs to be moved down

Corizon•2y ago

@jochemm yeah, I can handle the border-radius guy @jochemm Okay 👍 Thanks a lot. I really appreciate @jochemm

Jochem•2y ago

no worries, happy to help! 🙂

Gaming

Programming

The best approach for this >>>