Responsive Stasts Preview Card | Using Flexbox and Media Queries

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Mohd Gulam Ansari, congratulations for your new solution!

  Answering your question, there are 3 ways to apply the overlay:

  You can use, filter, background-blend-mode or mix-blend-mode (the best choice in my opinion). See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 86%;}
  

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/stats-preview-card-vanilla-css-custom-design-text-animation-RfGBFlMpwK

  👋 I hope this helps you and happy coding!

  1

  ---

  

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted about 2 years ago

  @correlucas You were faster than me again, Lucas. Haha :D

  1
• 

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted about 2 years ago

  Great job on the solution, Mohd!

  For the overlay - I can suggest you to use these two css properties called {mix-blend-mode: multiply;opacity: 0.8;}. I firstly saw this from a very active and skilled developer here, and I immediately used those properties for the image header :D

  Give that one a go and let me know how that looks for you.

  Happy coding!

  0