Design comparison
Solution retrospective
Hi there,
I have no idea how to do these things.
-
for the image to have a purple overlay.
-
for the mobile version to look like the example.
Please assist. Thanks.
Community feedback
- @ParthPatel76Posted over 3 years ago
you need to first nest img inside a parent div, then, use css property: opacity -> on img then set background-color property on parent div.
above 2 properties, will help you to make your design as close as possible to given challenge.
1@MelvinMelonGitPosted over 3 years agothanks for your reply! Will try that when I have time to improve on this.
0 - @cutebidPosted over 3 years ago
put the img tag in a div container, then set the div background color and set the img to a property of mix-blend-mode and value of multiply then play with opacity as you want.
I hope this helps
0@MelvinMelonGitPosted over 3 years agothanks for your reply! Will try that when I have time to improve on this.
0 - @abhishekg495Posted over 3 years ago
You can use the sepia image filter combined with hue-rotate to first insert some orange into the image and then rotate it to purple
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