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 (.img-container) , I added a background and used mix-blend-mode on the (img ) , I hope this suggestion works and helps. Happy coding!(the bold text is the code i modify in your source code)
(you need to create a container of the image )
.img-container {
background-color: blueviolet;you can adjust this
}
img {
mix-blend-mode: multiply;
object-fit: cover;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
display: flex;
align-items: center;
margin-left: 50px;
/ filter: grayscale(100%) sepia(100%) hue-rotate(290deg); you can remove this /
}
Marked as helpful1
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