Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello ThaBeanBoy, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Instead of using this long code:
.colourizer { height: 100%; width: 100%; background-color: var(--Colour-Soft-violet); opacity: 0.5; position: absolute; top: 0; right: 0; }
You can use this code shortcut to reach the same color of the challenge. All you need is to use
mix-blend-mode
to make the color blend between the image and the background-color of the container. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; Opacity
✌️ I hope this helps you and happy coding!
Marked as helpful1@ThaBeanBoyPosted about 2 years ago@correlucas Oh my gosh, I just googled it, this is way better. Thank you so much.
One more question, where do you find these tips and tricks, I'd really love a way to improve my CSS skills. thanks for any feedback.
1@correlucasPosted about 2 years ago@ThaBeanBoy hey bro! The funny thing is that someone told me this thing about mix-blend-mode in a comment and the most od thinga I've learned doing the challenges. Two resources for Css are the Kevin Powell channel in YouTube and the website css-tricks.com
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