Skip to content
Submitted over 2 years ago

Stats preview card component

ShyamCanCode•90
@Itachidorri
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 faced many difficulties when trying to make the images responsive. Prior to this project I used background images for images section of the webpage. The problems I faced are as follows:

  • The object-fit property didn't work when I used it on large screens but worked when I used it on smaller screens, you can check it in my code. Anyone know why?
  • I ended up using flexbox to make the image a flex item and cover the container it was in.
  • The purple filter or overlay on the image was tricky to design. After some internet surfing I found many solution but nothing worked. At last I used background color and made the image transparent to get the desired effect. Any other ideas on how to design this?

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Shyam, congratulations for your solution!

    Answering your question:

    The object-fit is working, I've checked the live site, its just that you can see it too much, because when the container starts to scale down, the solution immediately gets the media query activated, but if you note before the media query gets active the image gets cropped a little bit.

    To do the purple overlay on the image all you need to do is apply mix-blend-mode in this case with multiply. See the code below:

    .content-img {
mix-blend-mode: multiply;
opacity: 0.8;}

    Hope it helps and fee free to ask more questions.

    Marked as helpful
    1
    ShyamCanCode•90
    @ItachidorriPosted over 2 years ago

    @correlucas Thanks for clearing it out, I understand it a bit now and also thanks for the alternative way to overlay.

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @Itachidorri You're welcome Shyam, then say me if works after you apply the changes.

    0
    ShyamCanCode•90
    @ItachidorriPosted over 2 years ago

    @correlucas It works fine

    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