Skip to content
Submitted almost 2 years ago

Stats Preview Card

Trey Tallent•60
@treytallent
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

I was unable to achieve the purple filter effect on the image without editing it in Photoshop. A filter effect would be possible if the image was a background-image, however I couldn't find a solution where this was feasible whilst accounting for accessibility and responsiveness.

Community feedback

  • J.D. Browne•870
    @PeshwariNaanPosted almost 2 years ago

    Hello Tre - nice work on completing the challenge.

    As per your issue with the purple, you don't need to do this with PS. This is just a simple filter.

    • In your css, change the background of your .card-container to background-color: hsl(277, 64%, 61%)

    • Then for the image element, which will be in the card-container, you can do something like this:

    .card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}

    The mix-blend-mode: multiply; will get you the color effect you are looking for.

    Hope this helps - Happy coding

    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