Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Jolup! Congratulations for this challenge solution!

  Your solution is really good done, I liked the work you did with the colors and how you've created the effect overlay using a div to create this purple background playing with the opacity. I liked too that you've used object-fit to manage the image size.

  There's a little problem for this method you've used, because this doesn't match the exact overlay color and doesn't cover the mobile image at all, if you see the mobile version theres a little bottom gap between the overlay effect and the image.

  The best way to fix that is doing the effect overlay by inserting both mobile and desktop images inside the <picture> tag to allow changes when the devices switch and to manage the overlay effect with the same css code.

  In this case applying the previous changes the code for the purple overlay effect will be:

  picture {
  mix-blend-mode: multiply;
  opacity: 75%;
  }
  

  Doing that you save a lots of lines of code and dont need to worry with the overlay color position, since its attached to the <picture> element.

  Jolup, see if these changes improve your solution and feel free to ask me more about the method.

  Hope it helps you and happy coding!

  Marked as helpful

  1

  ---

  

  yehonatan413•120

  @yehonatan413Posted over 2 years ago

  @correlucas Thanks for the feedback! I updated my solution.

  1