Design comparison
Solution retrospective
I'm still struggling with transparency of image. Any idea?
Community feedback
- @jaycgreenwaldPosted over 2 years ago
Karolfm12 - Two things that helped me with this part: 1) learning how to insert images with the css BACKGROUND property instead of the html IMG tag and 2) PSEUDO ELEMENTS - specifically the ::after and ::before ones.
Basically, you use CSS to display the image (instead of HTML), then add a color over the top of it using the ::after pseudo element. Reduce the opacity of the color to let the image show through. I think of it like adding a layer of color on top of an image like you would in Photoshop or similar.
This is a high level overview of what to do and how to get started. I'm still very new at this so hopefully someone with more experience responds too! But I do think looking into the CSS background property and pseudo elements are a solid start. Cheers!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord