Blend Mode Issue
Hi, I am working on this challenge, it is now perfect for small, medium and large screens, but issue is on large screen when I apply the blend mode difference on h1 it don't work, and when I add it to .hero-section-content, it works fine but resulting in 2 problems, the text over the image should be black instead of greenish(due to blending mode), and it is also applying the blending mode to p tag and button as well, I just want to have blend mode on h1, how to achieve i, I tried to do it but could not find the solution.
https://github.com/hamzafrontend/web-page
https://hamzafrontend.github.io/web-page/
GitHub
GitHub - hamzafrontend/web-page
Contribute to hamzafrontend/web-page development by creating an account on GitHub.
1 Reply
I can't give you a solution but bear in mind that the mix-blend-mode is in relation to the element's direct parent.
That is why it doesn't work when you apply it directly to the h1 as its parent doesn't have any color.
From mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.If you could place the image as a background to the hero container,that might work (as regards getting the mix-blend-mode to work on the h1 only). The color issue is more complicated due to the way that the blend-mode works. You may need to look at alternative blend modes but I don't think that any of them will do exactly what you want (all black).