Stats Preview Card Component

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months 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!

  Marked as helpful

  0

  ---

  

  rikku08•70

  @rikku08Posted 9 months ago

  @danielmrz-dev Thank you. Thank you for this code that you have provided, I will definitely try it. I will have a look into background-blend-mode and see how it works and how to apply it on this project.

  1
• 

  Juan Camilo Botero•970

  @jcboteroPosted 9 months 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!

  Marked as helpful

  0

  ---

  

  rikku08•70

  @rikku08Posted 9 months ago

  @jcbotero Yes, it is not working for me. I'm trying it out again and will upload the updated version of this challenge. Thanks for your suggestion, will definitely try this code.

  0
• 

  Lance•1,580

  @IzykGitPosted 9 months 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.

  1

  ---

  

  rikku08•70

  @rikku08Posted 9 months ago

  @IzykGit Thank you, will have a look into that attribute and use it.

  0