Stat preview-card component

Community feedback

• 

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  Use a div container for the image, set container background to violet color, then set image opacity to some value like 0.8, and in the end use below CSS property for your image mix-blend-mode: multiply;

  Marked as helpful

  0
• 

  Dharmik_487•1,740

  @Dharmik48Posted about 3 years ago

  Hey Shawn👋,

  I really think that your solution looks great on bigger screens, but the problem is that the image doesn't have the purple accent. And also when screen size gets smaller the image doesn't up all the space in right that it should instead it gets way smaller and the card itself loses the padding.

  And to make the image purplish you can use background: linear-gradient(hsla(277, 64%, 61%, 0.8), hsla(277, 64%, 61%, 0.8)), var(--image-url) center center;. You can learn more about it here- https://dev.to/selbekk/how-to-overlay-your-background-images-59le.

  Hope it helps🤗

  Marked as helpful

  0
• 

  Shawn•90

  @ShawwnscottPosted about 3 years ago

  Both these replies helped me very much!!! thank you.!!

  0