Stats preview card component solution using CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  I would recommend putting the image as an actual img element on the HTML because the img would have height by default. So, you don't need to specify a height. Also, you can use picture element to change the image from one version to another.

  Also, I suggest making the img as block element and setting max-width: 100% to make it easier to work with img element.

  Then, to create the overlay I suggest using mix-blend-mode and adjusting the opacity of the img to make it looks similar (or even the exact same) to the design.

  For your reference, you can see @DarrickFauvel's solution for this challenge. He had done an amazing job on making the overall (and the site overall).

  One suggestion - I recommend making the stats as a list. If the site has no styling (which is like a document) then it would be a list. This way, the statistic has semantic HTML markup. 😉`

  • 10k+ companies
  • 314 templates
  • 12m+ queries

  Lastly, don't forget to fix all the issues that have been generated.

  That's it! I hope this helps. 🙂

  Marked as helpful

  2
• 

  Opeoluwa•330

  @Opeoluwa-OgunlajaPosted over 2 years ago

  Hey King!

  For the image, you can use a pseudo element to achieve the same result like ::after or ::before

  • just add some CSS to the .header-img ;

  .header-img{
   ............................
   position: relative;
   isolation: isolate;
  }
  
  

  • Then you should be able to style the pseudo element to look like;

  .header-img::before{
    position: absolute;
    inset: 0;
    mix-blend-mode: overlay;
    background-color: .....;
  }
  

  Not sure if it's a better way to you though but I hope you found it helpful 🙂

  Marked as helpful

  1