@AkoToSiJeromeEh
Posted
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 .header-image class, I added a background and used mix-blend-mode on the .header_img class, also in the .card-left-row 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)
.card-right {
width: 45%;
background: hsl(277deg 80.79% 49.36%);you can adjust or change this
}
.card-right img {
mix-blend-mode: multiply;
opacity: 0.8;you can adjust this
width: 100%;
height: 100%;
opacity: calc(0.4);
}
Marked as helpful
