Design comparison
Solution retrospective
Hey everyone π. this was quite easy for me, but as always I've learned a lot during the project . my only problem was with that image .π’ I used ::after for that color layer and reduced the opacity so that image become visible although I am not thoroughly happy with the result, since it seems ::after is not covering the image and it's slightly bigger, I don't know why that occurs but if you take a look at 400px or below you will realize what I am saying . π but anyway I loved this challenge and, I love to know your though on this . thank you all π happy codding .
Community feedback
- @correlucasPosted about 2 years ago
Hello Azka, congratulations for your new solution!
Nice solution and nice design(where you get inspiration for this amazing design?)
Here's my tips to make the color overlay on the image, instead of using this lines of code:
.img-container::after { content: ""; width: 100%; height: 100%; background: hsla(277, 63%, 30%, 0.699); position: absolute; top: 0; right: 0; border-radius: 15px 15px 0 0; }
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 sets 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!
Marked as helpful1@AzkanorouziPosted about 2 years ago@correlucas from you Lucas, thank you for your amazing solution. π
1
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