Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Vaibhav Singh, Congratulations on completing this challenge!
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.Here’s how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
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!
0 - @neilk17Posted about 2 years ago
Hi Vaibhav,
Good job with completing this challenge!
If you don't mind, here's some improvements you can make:
Accessibility issues: This has an easy fix, rather than using
<h5>
, try to just increase the value by one and then change thefont-size
instyles.css
.Purple Filter I was also not able to figure out how to add the purple filter overlay to the image, if you figure out how to do this please let me know!
Hope this helps, and let me know if you have any other questions.
0
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