Design comparison
Solution retrospective
can anyone help me out with the image overlay color
Community feedback
- @danielmrz-devPosted 10 months ago
Hey @KwabenaIzen!
Your project looks great!
I also had a hard time trying the image coloring when I did this project, but I managed to do it like this:
.image { background-image: linear-gradient(0deg, #7210af9c, #7210af9c), url('images/image-header-mobile.jpg'); background-size: cover; height: 240px; }
There's also another option using a property called background-blend-mode, but I confess I don't know how to use it very well. I'm mentioning it because you might wanna look into it. 😊
Hope it helps!
Other than that, your project looks fantastic!
1 - @mkborisPosted 10 months ago
Hi @KwabenaIzen, great job on your solution, for the image overlay use
mix-blend-mode: multiply; opacity: 0.8;
on your .card__container imgAlso, you can make it responsive on smaller screens by adding
@media screen and (max-width: 980px) { .card__container { width: 438px; flex-direction: column; }
Hope this helps.
0@KwabenaIzenPosted 10 months agoafter i used the mix-blend-mode:multiply; and that of the opacity, the overlay of the image became dark any ways to change the color??@mkboris
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