Stats preview card component w/ HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello PVI, congratulations for your new solution!

  Your component is fine, but you need to fix the image that is not resizing with the right proportions use this to fix it display: block; max-width: 100%; object-fit: cover;

  IMG {
      object-fit: cover;
      display: block;
      display: block;
      max-width: 100%;
  }
  .picture-color {
      background-color: hsla(280, 94%, 25%, 0.55);
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
  }
  

  To have the same overlay effect of the design use it:

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

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  PVI•210

  @PVIdubsPosted over 2 years ago

  @correlucas Thank you very much for the help, I didn't know mix-blend-mode... I'm already working on it...

  0