Responsive Stats Preview Card using pure CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 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!

  0

  ---

  

  Shiva•670

  @shivaprakash-sudoPosted about 2 years ago

  @correlucas Hello, thank you for commenting on my solution. I've tried your code and it doesn't seem to have any effect on the output, especially the object-fit line. The mix-blend-mode line makes the image too dark, same as the background, not the purple accent like in the design.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @shivaprakash-sudo You need to use opacity: 75% to make the color blend with the background color of the layer, but if you need to use this effect with one element thats comes from the html as <img> or <picture> if is a pseudo-element or background-image this effects doenst work properly.

  I applied these changes to my solution and you can check here how I did:

  https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK

  0

  

  Shiva•670

  @shivaprakash-sudoPosted about 2 years ago

  @correlucas Tried that, but it didn't work. Also, your CSS file is minified and everything is in one line, so I'm not able to check your code properly.

  0