Stats preview card component

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 🤩

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.