@correlucas
Posted
Hello Ruthwik, congratulations for your solution.
Answering your question:
There's three ways to reach the overlay effect in the image.
1.You can play around opacity and the div background(purple), you'll have a close result but not the same as the reference.
2.Using filters over the image to force the color change, this gives you a better result, but doesn't match it 100%.
3.The easiest: Using mix-blend-mode + opacity, all you need to do is add to the img the following properties mix-blend-mode:multiply;
and an value around opacity: 0.7;
et voilà, here's the image overlay.
Hope it helps you Ruthwik, say me if works, happy coding!
Marked as helpful