Stat Preview Card Component Built Using Flexbox

This project posed some unique challenges. The first was finding the most effective way to create an overlay. I looked into using positioning and z-index, and then I looked into pseudo-elements. While they were effective solutions, I ultimately settled on using the mix-blend-mode property on the image itself. This allowed the image to mix with the background and achieve a satisfactory overlay for the image:

img {
  display: block;
  mix-blend-mode: multiply;
}

Speaking of the block section, I was encountering a strange situation where a tiny section of white space would be under the image. I couldn't figure out exactly why it was occurring, but then I learned images are shown as inline elements. Changing it to a block display fixed the white space issue allowing everything to fit perfectly.

Another thing about this project was the swapping of images. While I could've used a media query and used the image as a background property in CSS, I opted to use a script to change the image on the resize event.

function swapImage() {
  const image = document.querySelector("img");
  if (screen.width >= 1100) {
    image.src = "./images/image-header-desktop.jpg";
  } else {
    image.src = "./images/image-header-mobile.jpg";
  }
}

window.addEventListener("resize", swapImage);

I don't have too much hands-on experience with JavaScript yet, but if anyone has any tips or suggestions about the script or any of the above code snippets, I'd love to hear them!