Submitted over 1 year ago

Stats preview card component - Fluid Layout with TailwindCSS

Stephen Yu•150

@StephenYu2018

Preview site View code

This is a solution for...Stats preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

As you can see when comparing my design to the one in the given design image, it's not quite there yet. I tried using :before for the overlay and adjusted it with CSS filters, but after a few hours, I gave up and stuck with what I had. I feel like CSS filters would make this convenient, but it's difficult to choose a color with specific RGB/HEX/HSL values. Is there a more convenient way to use a color overlay on an image?

Community feedback

Josh•1,110

@josh76543210Posted over 1 year ago

Hello @StephenYu2018,

Here is an idea for how to create an image overlay:

.card-img {
  background-image: linear-gradient(
      rgba(66, 9, 102, 0.6),
      rgba(66, 9, 102, 0.6)
    ), url("images/image-header-desktop.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

This is what I used for my solution. If you are interested you can check it out here.

Happy Coding!

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