@Micpic3
@juanardanaz
Submitted
Hello!
I´m a designer and video editor, still new to the IT world and last year I was studying web development.
This is my first challenge at Frontend Mentor. One of the problems I have was with the violet overlay. I think there is a better method to develop it because I am not completely satisfied.
Thank you very much for your time and your feedback!
@Micpic3
Posted
In regards to the violet overlay:
The color is the same as the "accent" color defined in the style guide.
There is a css property called mix-blend-mode. Mozilla has a section about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode. In particular, the multiply option is most likely the one used for the challenge. The concept of blend modes is not unique to css. This is a resource I found helpful in understanding how some of them (including multiply) actually work: https://photoblogstop.com/photoshop/photoshop-blend-modes-explained.
So with respect to your code, you'll need your filter-img div over the img (which is already happening). Then, use mix-blend-mode: multiply in the filter-img div to multiply it with the image:
.filter-img {
mix-blend-mode: multiply;
background-color: hsl(277, 64%, 61%);
}