Submitted about 1 year ago

Responsive Stats Preview Card Component using HTML, CSS

Charles• 170

@cacti00

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

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,230

@hitmorecode

Posted 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

Charles• 170

@cacti00

Posted 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

hitmorecode• 6,230

@hitmorecode

Posted 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

Charles• 170

@cacti00

Posted about 1 year ago

Thanks @hitmorecode

Please log in to post a comment

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