card image out of box help

Hello everybody, I've design this in html, but when I tried to make the grey part the image put over the previous section. You can watch my codepen in this link. ¿There's any way to do the gray part? I would appreciate the help. Thank you. https://codepen.io/agilardino/pen/wvNGmYQ
No description
11 Replies
Jochem
Jochem13mo ago
I think you missed linking the codepen
Alejandro Gilardino
Yes, thank you @Jochem I've already updated.
ἔρως
ἔρως13mo ago
you fake it you don't use any position on the image and text, they are fine and shouldn't be touched but you can use the container of the image to have a ::before or ::after, which has the background then, you have the text, which has a gray background
Alejandro Gilardino
@ἔρως thank you so much for your help, I did it last nigth and it works perfectly.
ἔρως
ἔρως13mo ago
you're welcome can you share the final result, as i am curious about it?
Alejandro Gilardino
Sure, I updated the CodePen. https://codepen.io/agilardino/pen/wvNGmYQ
ἔρως
ἔρως13mo ago
it looks great but i will check it better later on
MarkBoots
MarkBoots13mo ago
thought it was fun to try. here a solution with grid. https://codepen.io/MarkBoots/pen/rNPLOXx
ἔρως
ἔρως13mo ago
that ... im impressed and confused
Alejandro Gilardino
Great!!! but one question, the var(--image-size) and the content for the grid-template-row, where did you put it? Thanks a lot
MarkBoots
MarkBoots13mo ago
the var is set up on .card and used in .card-image and .content
No description
Want results from more Discord servers?
Add your server