Stats preview card

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Emanuel, congratulations for your new solution!

  Your image is get distorted and to fix that you need to make your image fully responsive add 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%;
  }
  

  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:

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

  👋 I hope this helps you and happy coding!

  1

  ---

  

  Tomas Emanuel Ramirez Abarca•580

  @emanuel-raPosted about 2 years ago

  @correlucas Thanks for your tip, i'll try to improve 🐱‍🏍

  1