Stats Preview Card Component

Community feedback

• 

  P

  Daniel 🛸•44,780

  @danielmrz-dev

  Posted about 1 year ago

  Hey @rikku08!

  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!

  01

  Marked as helpful
• 

  Juan Camilo Botero•970

  @jcbotero

  Posted about 1 year ago

  Hi rikku08!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:

  .img { mix-blend-mode: multiply; opacity: 0.8; }

  In this way, the image achieves the violet color that the challenge asks us for.

  If you think this helped you, please mark the comment as helpful. Thank you!

  01

  Marked as helpful
• 

  Lance•1,580

  @LanceOS

  Posted about 1 year ago

  A way you can change the color of the image in CSS is by using the filter attribute. This allows you to change things like the hue, saturation, contrast, etc.

  11