Design comparison
SolutionDesign
Solution retrospective
I tried to get the image colour to change but failed to do so. Any feedback on it and otherwise is welcome.
Also for the grid that I used there were 3 columns instead of 2.Could anyone explain how that work?
Thank you for your help!!!
Community feedback
- @hitmorecodePosted over 1 year ago
If you apply these changes it will work, you will see the overlay on the image.
img{ width:100%; height:100%; /* these two line were the problem, you can remove them. I just commented them out */ /* object-fit: cover; position: relative; */ } .right { position: relative; } .right::after{ position: absolute; content: ''; background-color: var(--soft-violet); mix-blend-mode: multiply; /* add this line */ opacity: 0.8; /* add this line */ top: 0; left: 0; height: 100%; width: 100%; }
Marked as helpful0@Et18nPosted over 1 year ago@hitmorecode thank you so much for this.
Could you tell me how does this work? Does it apply to the parent class instead of the image?
0 - @KingSkyrosPosted over 1 year ago
Hello, would you like to try this?
img{ border-top-right-radius: 2%; border-bottom-right-radius: 2%; mix-blend-mode: multiply; }
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I hope this helps!👍
Marked as helpful0
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