Stats preview card component solution

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 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

  ---

  

  KwabenaIzen•240

  @KwabenaIzenPosted 11 months ago

  okay thank you @danielmrz-dev

  0
• 

  Boris•2,850

  @mkborisPosted 11 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 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•240

  @KwabenaIzenPosted 11 months ago

  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