Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component solution

@KwabenaIzen

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


can anyone help me out with the image overlay color

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

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

@KwabenaIzen

Posted

okay thank you @danielmrz-dev

0
Boris 2,870

@mkboris

Posted

Hi @KwabenaIzen, great job on your solution, for the image overlay use mix-blend-mode: multiply; opacity: 0.8; on your .card__container img

Also, 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

@KwabenaIzen

Posted

after 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 GitHub
Discord logo

Join 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