Stats Preview Card using flex

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your doubts that I believe will be of great interest to you.

  ---

  iMAGE 📸:

  • You have done a pretty job in layout where most of the beginners fail, congrats for that!.

  ---

  • And Now for your question, "How to filter the image like the challenge ?"

  ---

  • You want add a div for the img, the div can act as parent element. In simple words wrap the img element with div

  ---

  • Then you want to apply the primary violet, the color which you applied for the text "Insights"

  ---

  • Your html structure want to be like this,,

  <div class="image-wrapper">
  <img class="pic" src="images/image-header-desktop.jpg" alt="">
  </div>
  

  ---

  • Now add these styles,

  .image-wrapper {
  background: hsl(277, 64%, 61%);
  }
  .pic {
  mix-blend-mode: multiply;
  opacity: .75;
  object-fit: cover;
  }
  

  ---

  • That's all now you can check the result, It would look like the exact carbon copy of the original!

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0