Design comparison
Solution retrospective
Color overlay on an image? Got me stumped
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Thomas,
Nice work on this project and no faults on the accessibility/html report - well done!
As an alternative option to the overlay approach you could try adding a solid
linear-gradient
to a background image:background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);
.You would also need to explore
background-blend-mode
(multiply
usually does the trick).Also I think you should bring your media query in sooner, it suffers at the small tablet size, the provided sizes in the design guide aren't prescriptive - do what you need to, to make the design work!
I hope that helps, happy coding!
Marked as helpful1 - @cacostedPosted almost 3 years ago
Hello bro, your solution looks nice, I understand, the color overlay part was quite rare to pull out. The way that I did it, was with background-image: linear--gradient(color), url(".image/some.png'). I also see other solutions that did it with opacity and display none. Maybe you could check it out
Marked as helpful0 - @FrancisKhaledKhodjaPosted almost 3 years ago
Hello. You must add a div with a background-color on the image and play with the opacity and thé mix-blend-mode.
Marked as helpful0
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