Stats Preview Card Component, CSS, Flex and Grid

Heyyy, good job on completing the challenge, regarding your query , apparently you can do such overlay effects on <div> only . . .so what you can do is wrap your image inside a <div> and use pseudo-classes like ::before and ::after, something like this

HTML

<div class="img-desktop">
        <img
          src="images/image-header-desktop.jpg"
          alt="Women talk in a meeting"
          width="450"
          height="355"
        />
      </div>

CSS

img{
  max-width: 100%; 
  max-height: 100%;
}
//when you wrap your img element inside another element like div , it gets easier to control your img dimensions this way, max-width and max-height thenn adhere to the resp dimensions of the container , here div

.img-desktop {
  display: none;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  max-width: 450px;
  position: relative; 
}

.img-desktop::after{
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  height: 99%;
  width: 100%;
  background-color:var(--soft_violet);
  opacity: 0.5;
}

// pseudo class help you with the overlay effect

Also prohibit using width and height attributes inside your html, it'll start hindering with the responsiveness sooner or later.

It'll also be better if you make container <div> tags , and use appropriate BEM nomenclature if you can in your code , since it'll make your code more readable to others . . .

Not that its related , but looking at your github profile I'd say that you start doing challenges which require JS, you've done enough HTML-CSS , time to level up, also start working either with CSS-frameworks like Bootstrap or Tailwind-CSS ,or with pre-processors like SASS . . .coz they'll make your life a lot eaiser , otherwise you'd regret later to have spent time on something as vague as css, besides the learning curve steepens when you come to JS , you can learn the best CSS practices while at it . . .what else . . . . keep grinding . . . 💪💪