Skip to content
Submitted over 1 year ago

Stats preview card component solution Flex + SCSS

Igor•230
@MIU-cz
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

please help! how can i do transparency on image like at template design? my way:

  1. add opacity on div - 0.65;
  2. add opacity on img - 0.45; but it non like on template!!

Community feedback

  • imad•3,330
    @imadvvPosted over 1 year ago

    Greetings Igor! Congratulations on completing this challenge! 👏👏👏

    Have you considered using mix-blend-mode instead of opacity?

    you can try something like this,

    .card__picture img {
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0.45; */
mix-blend-mode: multiply;
}

    Overall, your attempt was really good. Keep up the great work!

    Marked as helpful
    0
    Igor•230
    @MIU-czPosted over 1 year ago

    @imadbg01 Thank you! I try it

    1
    Igor•230
    @MIU-czPosted over 1 year ago

    @imadbg01 its working!!!

    1
    imad•3,330
    @imadvvPosted over 1 year ago

    @MIU-cz You're welcome bro!

    0

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