Design comparison
Community feedback
- @AkoToSiJeromeEhPosted over 1 year ago
Hi! Great work out there! I just wanted to share how you can achieve an image color overlay using CSS properties like mix-blend-mode: multiply or background-blend-mode: multiply. Since you are not using the image as a background, mix-blend-mode: multiply is suitable. If you are new to this property, mix-blend-mode blends the background color of its parent element. As you can see in the (figure) , I added a background and used mix-blend-mode on the (.image-content figure img ) , also in the (feedback) I suggest to use d-grid with grid-template-colums : repeat(3,1fr) instead of d-flex in order to match the positioning in the design reference I hope this suggestion works and helps. Happy coding!(the bold text is the code i modify in your source code)
.image-content figure img {
width: 100%;
mix-blend-mode: multiply;
vertical-align: middle;there is a little gap on image and cointainer so better to add this
opacity: 0.8;you can adjust this
}
figure {
background-color: blueviolet;you can change this
}
Marked as helpful1@Baraski-jrPosted over 1 year agoThanks so much i spend hours try to fixed it but i couldn't Thanks@AkoToSiJeromeEh
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