Skip to content
Submitted about 3 years ago

Stats Preview Card with HTML, CSS

Jesse Ma•95
@jma26
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

Tried to make this card as responsive as possible with plain HTML, CSS. Had a hard time figuring out how to add an overlay instead of using position: absolute method but found a solution using mix-blend-mode + opacity instead! What's the most popular or best recommended way to add an overlay on top of an image these days?

Any tips, suggestions, and feedback is welcome!

Thank you #HappyCoding

Community feedback

  • Nick•760
    @Nick331102Posted about 3 years ago

    This is the easiest way I have found for the overlay.....

    try using an inset box shadow

    box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596);

    you can adjust the color.

    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