Stats preview card using css grid

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image to match the color, I did something like this, I hope that helps, size might not fit your solution but you can adapt it depending on your own code:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  In the tinted-image, remove the linear gradient value, only specify the background image, background-color and background-blend-mode: .tinted-image{ background-color: hsl(), background-image: url(); and its properties, background-blend-mode: multiply} , this should help you with the overlay hope am helpful . HAPPY CODING

  Marked as helpful

  1

  ---

  

  tony/c.dev•260

  @tony1cPosted almost 2 years ago

  @Hassiai It helped a ton. Only thing is that I still cant get the same color but atleast it's way darker this way. Already made the changes. Thanks a lot!

  0