Design comparison
Solution retrospective
I'm not sure about creating the image overlay..
I also had a hard time make it responsive,any comment is greatly appreciated🙏
Community feedback
- @fernandolapazPosted over 1 year ago
Hi 👋🏻, regarding your comment:
- You could use the
mix-blend-mode
property that specifies how an element's content should blend with its direct parent background, like this:
.img__container { background-color: var(--Soft-violet-accent); } .img__container img { mix-blend-mode: multiply; opacity: 0.75; }
I hope it’s useful,
Let me know if it worked : )
Regards,
Marked as helpful1 - You could use the
- @hitmorecodePosted over 1 year ago
Congratulations well done, looks good. You can adjust the break point for mobile to 1110px. There is no problem with the overlay, you could also done it with a before pseudo element.
Marked as helpful1@yosrajalaliPosted over 1 year agothanks a lot for putting time on this . the overlay that I made is completely different from the design. I'm looking for a way to make it exactly the same @hitmorecode
0@hitmorecodePosted over 1 year ago@yosrajalali the one in the challenge is done with
mix-blend-mode: multiply
if you want to learn more about this check this link0
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