@correlucas
Posted
👾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 the img or picture selector:
img {
mix-blend-mode: multiply;
Opacity
✌️ I hope this helps you and happy coding!
Marked as helpful
@ThaBeanBoy
Posted
@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.
@correlucas
Posted
@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
