All comments

• 

  Alt08• 60

  @Alt08

  Submitted over 1 year ago

  with some defects that I can not solve.

  I don't know how to apply that purple color to the image.

  I appreciate any suggestion.

  

  stats preview card component with flexbox

  4

  51

  

  Fred Campo• 330

  @fredcamp

  Posted over 1 year ago

  Hi.. Good day!

  Since you can't add an ::after pseudo element selector to an image inside an <img> tag. You can use a work-around by using another tags like <div> or <span> and declare the background attributes and styles in the CSS.

  <main>
    <section class="card">
      <div class="card__img"></div>
    </section>
  </main>
  

  To apply the purple filter on the image. you can use background-blend-mode: overlay;

  .card {
    &__img {
      background: $primary-color url(../images/image-header-mobile.jpg)
        no-repeat center center/cover;
      background-blend-mode: overlay;
    }
  }
  

  1