Design comparison
Community feedback
- @AkoToSiJeromeEhPosted 7 months ago
Hi! Great work out there! I just wanted to share how you can achieve an image color overlay (as the original design contain) using mix-blend-mode: multiply or background-blend-mode: multiply. Since you are not using the image as background i recommend to use the mix-blend-mode:multiply and add a background color on the left container , (the bold text is code i modify in your source code) hope this suggestion helps and works . happy coding
.left-content { flex: 1; background-color: hsl(276.9, 63.8%, 61%); add this }
.stats-image { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; add this opacity: 0.7; you can adjust this }
Marked as helpful1@wetas2020Posted 7 months ago@AkoToSiJeromeEh thanks a lot for your guidance, I will modify the code as you mention, really appreciate it !
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