Stats Preview Card HTML, CSS, Bootstrap 5

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Hi, Kristine!

  To match the design, remove the opacity and z-index from your color overlay, and add mix-blend-mode: multiply and opacity to the image instead. An opacity around .85 seems to work pretty well. 👍

  1

  ---

  

  Kristine•310

  @sn-tinPosted over 3 years ago

  @brasspetals The color-overlay is a div so removing the z-index would add another item on top of the card so I just left it as is and added the mix-blend-mode and changed the opacity to .85. It looks better now. Thank you so much for this! 😊

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @sn-tin Glad it worked! The color works better beneath the image if you want to achieve the slight opacity effect in the design, hence my suggestion to remove the z-index. You could actually remove the color overlay div completely and set the purple color on your header-image div as the background color. 👍

  0

  

  Kristine•310

  @sn-tinPosted over 3 years ago

  @brasspetals Ohhh 😲 okay, i’ll do that. Thank you again!

  0