Stats preview card Challenge responsive solution - HTML & CSS

Community feedback

• 

  Santiago Morales•370

  @AleromsPosted about 2 years ago

  Good job on the challenge! I recently submitted my own solution too and was wondering how you used the 'mixed-blend-mode' to get the overlay color?

  1

  ---

  

  Raink31•340

  @Raink31Posted about 2 years ago

  @Aleroms Hey, thanks !

  To use the "mixed-blend-mode", I placed a background color behind the photo with this code :

  ` .img-box{

  position: relative;
  

  } `

  ` .img-box::before{

  position: absolute;
  
  content: "";
  
  width: 100%;
  
  height: 100%;
  
  left: 0;
  
  top: 0;
  
  background-color: hsl(277, 64%, 61%);
  

  } `

  And I applied this code on the photo :

  ` .img-box img{

  object-fit: cover;
  
  mix-blend-mode: multiply;
  
  opacity: 0.8;
  

  } `

  The multiply "mix-bland-mode" makes the violet background appear, and you can play with the opacity to bring out the black more or less :)

  1