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
11 Replies
I think you missed linking the codepen
Yes, thank you @Jochem I've already updated.
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
@ἔρως thank you so much for your help, I did it last nigth and it works perfectly.
you're welcome
can you share the final result, as i am curious about it?
Sure, I updated the CodePen. https://codepen.io/agilardino/pen/wvNGmYQ
it looks great
but i will check it better later on
thought it was fun to try. here a solution with grid. https://codepen.io/MarkBoots/pen/rNPLOXx
that ... im impressed and confused
Great!!! but one question, the var(--image-size) and the content for the grid-template-row, where did you put it? Thanks a lot
the var is set up on .card and used in .card-image and .content
