Stats Creview Card Component

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great work out there! I just wanted to share how you can achieve an image color overlay using CSS properties like mix-blend-mode: multiply or background-blend-mode: multiply. Since you are using the image as background i recommend to use the background-blend-mode:multiply and add a background color on the image container , (the bold text is code i modify in your source code) hope this suggestion helps and works . happy coding

  main .image {

  background-image: url(../images/image-header-desktop.jpg);

  background-size: cover;

  width: 50%;

  position: relative;

  background-color: #8d20f3;you can change this

  background-blend-mode: multiply;

  opacity: 0.8;you can adjust this

  }

  also i recommend to use d-grid instead of d-flex in order to match the positioning in the design reference
  
  main .info .stats {
  
  display: grid;
  
  grid-template-columns: repeat(3 , 1fr);
  
  /* align-items: center; */
  }
  
  

  you can remove this 
  main .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(73 9 113 / 50%);
  }
  

  Marked as helpful

  1

  ---

  

  Belly•300

  @Belly606Posted over 1 year ago

  Wow Thanks bro I didn't Know The Blind Property Till Now🤗, But The Opacity Property Didn't Work So I Reduce The Opacity Of Background-color I Don't Know If This Normal Or What @AkoToSiJeromeEh

  0