Stats preview component, using vanilla css

Community feedback

• 

  Jen Gori•170

  @jengoriPosted almost 2 years ago

  I also struggled with the color filter on the image when I completed this challenge. In the end, I used the CSS property mix-blend-mode on the image, and set the background color of the div that the image is contained in to the color that I wanted for the filter. So something like:

  .image-div { background-color: hsl(277, 64%, 61%); }

  .image { mix-blend-mode: multiply; }

  Marked as helpful

  1

  ---

  

  Nebil Nejmudin•230

  @Nebil-NejPosted almost 2 years ago

  @jengori mix-blend-mode, i never heard of it. this actually works well? i would like to try, can it be done?

  0

  

  Jen Gori•170

  @jengoriPosted almost 2 years ago

  @Nebil-Nej Actually the closest that I can get to the original design is by using both mix-blend-mode and opacity together, i.e.

  image { mix-blend-mode: multiply; opacity: 70%; }

  1
• 

  Nebil Nejmudin•230

  @Nebil-NejPosted almost 2 years ago

  It bothered me as well. but it was actually simple when i found out, just use this: -use the img tag in the html. -then use that section's background-color and opacity to make it transparent.

  section {
  background-color: random-color;
  opacity:  '<1' ; //for the transparency
  }
  

  or you can use the same section, and then add the image inside it.

  section {
  background-image: url(image url);
    background-color: random-color;
  opacity:  '<1' ; //for the transparency
  }
  
  

  oww and you did not center the part that needs to be centered, you can do that by using Flexbox centering

  body {
  width: 
  height:
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  Marked as helpful

  0