Skip to content
Submitted 7 months ago

stats-preview-card-component-main

Eríck•130
@Erick-SL
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I had problems placing the purple color over the image, so I decided to make a background, however, I believe there is an easier way. If you could help me by giving me a tip, I would be grateful.

Community feedback

  • JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 7 months ago

    Hey ! Great work out there with regards on adding color overlay on the image you are correct by adding background-color in .background and adding opacity in img element but it does not match color as the design has , i suggest that you can use mix-blend-mode in order to achieve the color overlay same as the original design . that's all happy coding !

    section .imagem img {
  border-radius: 0px 10px 10px 0px;
  height: 100%;
  opacity: .7; // you can adjust this
  object-fit: cover;
  width: 100%;
  mix-blend-mode: multiply; // add this
}
    Marked as helpful
    0
    Eríck•130
    @Erick-SLPosted 7 months ago

    @AkoToSiJeromeEh Thank you, I didn't know about this property. I'm still new at this!

    0
    JuvoGenesis👾•2,010
    @AkoToSiJeromeEhPosted 7 months ago

    @Erick-SL np man !

    1

Please log in to post a comment

Log in with GitHub

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