All comments

• 

  Alt08•60

  @Alt08Submitted 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

  @fredcampPosted 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