Submitted over 2 years ago

Stats preview card component Using Flexbox and CSS Grid

Jennifer• 220

@Jennifer1919

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Does someone know how to add a purple overlay on the image? Here is the code I wrote but it does not work, I don't know why...

img{ width: 100%; border-radius: 10px 10px 0px 0px; background-color:hsl(277, 64%, 61%); opacity: 0.3; }

Community feedback

Anosha Ahmed• 9,340

@anoshaahmed

Posted over 2 years ago

In the future, have your headings start with H1 and so. And to your question, this is what I did:

HTML:

<div class="mainpic">
    <div class="overlay"></div>
</div>

CSS:

.mainpic {
    min-height: 446px;
    min-width: 540px;
    background: url(images/image-header-desktop.jpg) no-repeat center right / cover;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    opacity: 0.8;
}

.overlay {
    height: 100%;
    width: 100%;
    background: #a743d6;
    mix-blend-mode: multiply;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

Marked as helpful

Jennifer• 220

@Jennifer1919

Posted over 2 years ago

@anoshaahmed Thank you so much for you help!

David Turner• 4,100

@brodiewebdt

Posted over 2 years ago

@Jennifer1919 As you can see there are a lot of ways to get the same thing done. I did that one a long time ago, and I would use @whoamihealay solution now. I did that in another project.

Marked as helpful

Jennifer• 220

@Jennifer1919

Posted over 2 years ago

@brodiewebdt Yeah i was surprised to see so many different solutions. Ok I'll try it out!

Andrew Southern• 390

@whoamihealay

Posted over 2 years ago

I did this. You can tweak the filter to have the exact same taint but I found my solution to pop a bit more !

.img {
    background-image: linear-gradient(
        hsla(277, 64%, 61%, 0.5),
        hsla(277, 64%, 61%, 0.5)
      ),
      url("./images/image-header-mobile.jpg");
      filter: contrast(200%) brightness(70%);
}

Marked as helpful

Jennifer• 220

@Jennifer1919

Posted over 2 years ago

@whoamihealay Thank you very much for your help!

David Turner• 4,100

@brodiewebdt

Posted over 2 years ago

This is what I did: .stats-card-img::before { position: absolute; background-color: var(--accent); content: ""; height: 100%; mix-blend-mode: multiply; width: 100%; }

Marked as helpful

Jennifer• 220

@Jennifer1919

Posted over 2 years ago

@brodiewebdt Thank you for your help! :)

Ben• 300

@BenChis

Posted over 2 years ago

Hi Jennifer,

What you can do is to add a div on top of your image with position relative, or absolute and then set a z-index to a positive integer and add pink background with an opacity.

Another solution would be to use simply the filter generator to add a pink effect. You can try to use this one 👇 https://cssgenerator.org/filter-css-generator.html

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord