Design comparison
Solution retrospective
It was hard to change the color of the image but somehow managed to do it.
Community feedback
- @correlucasPosted about 2 years ago
👾Hi Deepak, congrats on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
I saw that you've tried to create the
overlay effect
using a div withposition: absolute
and the color/position properties. But there's an easier and quick way to apply the purple overlay color all you need to usemix-blend-mode
to make the color blend between the image and the background-color of the container. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
Here's a good article explaining these effects with mix-blend-mode:
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
✌️ I hope this helps you and happy coding!
Marked as helpful1
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