Skip to content
Submitted over 3 years ago

Stats Preview Card Component

Victor Barbosa Rocha•110
@Victorrrocha
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

To give the image that tint, I created a div with transparency on top of the image. Don't know if that is the best method to do this, but I only used vanilla HTML/CSS. If anyone has a better idea, please tell.

I would love to get some constructive criticism on working with images.

Community feedback

  • Joel•290
    @joelsalmeidaPosted over 3 years ago

    -You can use mix-blend-mode to get this effect. "I think overlay would be cool in this case."

    -You can keep the aspect ratio of the images using width: 100%; height: auto;. "vice versa"

    -Try to plan your classes so that you only use what you need. "Your code will be easier to work with."

    Hope this helps. Keep coding.

    Marked as helpful
    1
    Victor Barbosa Rocha•110
    @VictorrrochaPosted over 3 years ago

    @joelsalmeida Thanks Joel! The classes were all over the place, I should've refactored it.

    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