I would make that purple image effect by using a pseudo element like :after on the image or its container. Make the pseudo width and height 100%, position it absolutely, make it solid purple then use a blend mode like multiply on it
Good luck
1
Design comparison
Solution retrospective
I didn't manage to get the image looking the way it looks on the design. Any idea on how to approach this?
Community feedback
Anna Leigh• 5,135
@brasspetals
Posted
Hi, Guillaume Fontorbe! 👋
Another way to achieve the coloring would be to simply set mix-blend-mode: multiply on the .card-header img. You already have the background-color of the card-header set to purple and opacity: .75 on the img, so this should work perfectly. 👍
0
Please log in to post a comment
Log in with GitHub
Join 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