@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.
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.
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;
}
}