Skip to content
Submitted about 1 year ago

Responsive Stats Preview Card Component using HTML, CSS

Charles•170
@cacti00
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

Hi all,

I struggled a bit in this task especially setting the image to fit the container even though I did a display grid on its container and a grid-template-columns: repeat(2, 1fr) to make both containers share the same width and height.

Feel free to suggest any other ways I could have approached the task.

From the design, you'll know that I found it difficult to set a background color on the image. I would have set the background image directly from CSS but we were given two images(one for mobile view and desktop view) so I had to use the picture tag to store both images and then tell it when to display one.

Please suggest ways to set a background color on an image.

Thanks :)

Community feedback

  • hitmorecode•6,360
    @hitmorecodePosted about 1 year ago

    For the overlay problem, this is how you can solve it

    /* add these to your css */
picture {
  position: relative;
}

picture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #aa5cdb;
  mix-blend-mode: multiply;
  opacity: 0.8; /* play with the opacity until you happy with the result */
}
    Marked as helpful
    2
    Charles•170
    @cacti00Posted about 1 year ago

    Thanks a lot just tried it now and it’s working But quick question what’s the difference between mix-blend-mode and background-blend-mode. @hitmorecode

    0
    hitmorecode•6,360
    @hitmorecodePosted about 1 year ago

    @cacti00 mix-blend-mode blends between stacked HTML elements, so elements on overlapping layers will blend with those beneath it.

    background-blend-mode blends between the layers of a background-image declaration. This means that as background images stack on top of each other, you can apply a blending mode to mix them together.

    Marked as helpful
    1
    Charles•170
    @cacti00Posted about 1 year ago

    Thanks @hitmorecode

    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