stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi @rick881, congrats on completing this challenge!

  I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:

  Instead of using this long code:

  .card .image:after {
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(136, 31, 201, 0.5);
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }
  

  You can add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  rick881•230

  @rick881Posted about 2 years ago

  @correlucas thankyou for your insight, implemented the changes and it works like a charm.

  0