index.js

document.addEventListener("DOMContentLoaded", function () {
  const containers = document.querySelectorAll(".image-container");
  const headlineSpans = document.querySelectorAll(".headline span");

  containers.forEach((container) => {
    container.addEventListener("mouseenter", function () {
      headlineSpans.forEach((span) => {
        span.style.color = "transparent";
        span.style.webkitTextStroke = "1px white";
      });

      this.querySelector(".project-title").style.opacity = "1";
      this.querySelector(".project-subtitle").style.opacity = "1";

      containers.forEach((otherContainer) => {
        if (otherContainer !== this) {
          const otherImg = otherContainer.querySelector("img");
          otherImg.style.filter = "brightness(0) invert(1) opacity(0.3)";
        }
      });
    });

    container.addEventListener("mouseleave", function () {
      headlineSpans.forEach((span) => {
        span.style.color = "";
        span.style.webkitTextStroke = "";
      });

      this.querySelector(".project-title").style.opacity = "0";
      this.querySelector(".project-subtitle").style.opacity = "0";

      containers.forEach((otherContainer) => {
        const otherImg = otherContainer.querySelector("img");
        otherImg.style.filter = "";
      });
    });
  });
});