Hi,
I want to add an image on right side of the card in the below codepen item, attached an image for reference. Could anyone please help me?
Thanks
The simplest way would be to add the image at the beginning of the card, then float it to the right.
If you want to avoid floats, and possible associated issues, it could potentially be done with flex, but would probably require some additional wrappers in the mark-up.
2 Likes
I’ve tried with all my knowledge but I couldn’t make it look like in the image attached.
To fill the right side like that, float probably won’t cut it.
Would you say that semantically, the image is content or decorative?
If it’s decorative (which it looks to me) it could be added as a background.
1 Like
Yeah, its a decorative.
What happened to the “fork” button in Codepen?
For a start, adding padding-right: 50% will push the content left, to make space for the background.
Then it’s a case of placing the background to fill the right side…
Fork button is on bottom right and its enabled when I checked it from incognito window.
There it is. I’m sure it used to be more prominent at the top somewhere.
Something like this, with a pseudo element avoids extra mark-up.
I made one or two other changes too, to make it more responsive.
If you need different images for each card, you should declare the image url (only) in the individual card classes.
4 Likes
Thank you so much for your help
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.