Responsive Stats Preview Card using pure CSS

Community feedback

• 

  Lucas 👾•104,200

  @correlucas

  Posted over 2 years ago

  👾Hello Shiva, congratulations for your new solution!

  Here's some tips to improve your photo:

  To have your image purple with the same overlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector. And the best part is that you;ll have a code really more clean than the current code, see the difference":

  BEFORE:

  .card__img::before {
      content: "";
      inset: 0;
      position: absolute;
      background-color: var(--clr-primary-accent-light);
      opacity: 50%;
  }
  

  AFTER

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

  Try to fix the image responsiveness display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  👋 I hope this helps you and happy coding!

  03