Stats preview card component

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi Ananth, have you tried adding that colour overlay as background-color on the same image as the image, instead of adding another element? You can then use background-blend-mode to get the effect you want.

  But in general to get the right image size you can also just change background-size to cover on the div with the image :)

  1

  ---

  

  Agustin Rezett•10

  @AgusRezettPosted over 3 years ago

  What a job! Adding something to the Agata comment. You can play with the "filter" css prop. Just modify the contrast or brightness values and you can reach the same sample colour. Otherwise, the image should be over the overlay. You can use the img html tag allowing a more complex and useful control of the DOM and future support (and the SEO will be glad).

  Good luck!

  0

  

  Ananth•50

  @AnanthkumaranPosted over 3 years ago

  @AgataLiberska Thank you for reviewing my work, I tried the background-size to cover but nothing happened but I'll definitely try background-blend mode.

  0

  

  Ananth•50

  @AnanthkumaranPosted over 3 years ago

  @AgusRezett Thank you for the solution, I tried it with the img html tag but when I tried to add the overlay using css the overlay was behind the image, I tried to change the position for both img and overlay but I was not able to get the required design.

  0