Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Jakub, congratulations for your solution!

  -- >Answering your question about the color overlay effect:

  I had the same question when I did this challenge, and to reach the color effect I found 3 ways to do that:

  1.👾The most obvious way was try to match the purple color blending the background and the image playing with the img opacity, you can get close to the color but doesn't match due some contrast issues, opacity isn't enough. The way you've done.

  .................

  2.👾Using filter one online tool to calculate the filter for the purple color overlay on the image and using it to blend, this works but doesn't match the image. Anyway this tool for filter generation is good to apply hover effects changing svg colors without a need to transform them into path, take a look:

  Filter code for the purple color:

  filter: invert(48%) sepia(22%) saturate(2034%) hue-rotate(235deg) brightness(90%) contrast(89%);

  --> See the filter calculator here: https://codepen.io/sosuke/pen/Pjoqqp

  .................

  3.👾The proper solution to do the effect overlay on the image, using mix-blend-modes. Just apply theses properties to the img / picture. Code below:

  img {mix-blend-mode: multiply; opacity: 0.75; }

  More about mix-blend-mode here:

  https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  .................

  I hope it helps you to fix the image overlay bro, happy coding!

  1

  ---

  

  Jakub Kulik•80

  @abuk111Posted over 2 years ago

  @correlucas Thank you for your answer! I tried filters with online tool, but IMO the result was much far than I expected. Using mix-blend-modes gives perfect effect! Thank tou for your tip! I really appreciated it!

  1

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @abuk111 hey Jabuk, happy to hear that worked for you 🤓 happy coding

  0