Stats preview card component

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, sizes might not fit your solutions but you can adapt it depending to 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 🤩

  0
• 

  John Omoke•240

  @jomoke814Posted almost 2 years ago

  Hello @benj0s85, Great job at completing the challenge. To help you out with your problem of applying the pink color to the image. It would help if you created a div with of overlay on the image and styled it. Like so:

  <div class=image>
  <img src="images/image-header-desktop.jpg" alt="image-header" class="img-hero">
  <div class="image-overlay"></div>
  </div>
  .image {
      position: relative;
  }
  
  .image img {
      width: 100%;
      object-fit: cover;
      display: block;
  }
  
  .image .image-overlay{
      background: hsl(277, 64%, 61%, 0.6);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: 10px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      overflow: hidden;
  }
  

  I hope this helps, the style change to your preference, and good luck.

  0