Stats preview card component | SCSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Hello Greta Li, congratulations for your solution!

  I liked the work you did with this solution adding the media queries and make the container super responsive. You should consider adding the media query a little later and let the desktop version scale a little bit more and only them activate the media query around width: 760px;.

  Not that to achieve the color overlay effect on the img you'll need to use a filter or mix-blend-mode to change and display the correct color and insert the image inside the html as <img> not background-color. See the code for this effect below:

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

  Hope it helps, happy coding!

  1