Stats preview card component Using Flexbox

Community feedback

• 

  Frank Ruiz•410

  @fruizoteroPosted about 2 years ago

  You can achieve this through the "mix-blend-mode:multiply" property that you apply to your image inside the picture. Remove the opacity from the next class;

  .card_header_pictures {    
    border-radius: 15px 15px 0px 0px 0px;  
    background-colour: hsl(277, 100%, 67%);
    opacity: 0.5; 
  }
  
  
  .card_header_picture { 
  width: 100%;
  height: 100%;
  border-radius: 15px 15px 0px 0px 0px;
  opacity: 0.7;
  mix-blend-mode: multiply;
  }
  

  Marked as helpful

  0