Text hover over image

<script>
	;(function(){

    let chck_if_gsap_loaded = setInterval(function(){
      const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
            gsap.registerPlugin(ScrollTrigger);

            hover_card()

            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);

function hover_card() {
  const cardContainers = document.querySelectorAll(".card-container");

  cardContainers.forEach((cardContainer) => {
    let tl = gsap.timeline({ paused: true, timeScale: 0.9 });
    tl.to(cardContainer.querySelector(".card-overlay"), { backgroundColor: "rgba(12, 34, 91, 1)", duration: 0.5 })
      .fromTo(cardContainer.querySelector(".card-headline"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 }, "-=0.4")
      .fromTo(cardContainer.querySelector(".elementor-divider-separator"),  { width: "100%" }, { width: "100%", opacity: 0, y: 0, duration: 0.2 }, "<")
      .fromTo(cardContainer.querySelector(".card-des"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 }, "-=0.4")
			.fromTo(cardContainer.querySelector(".card-cat"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 }, "-=0.4")
      .fromTo(cardContainer.querySelector(".card-btn"), { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.4 });

    cardContainer.addEventListener("mouseenter", () => {
      tl.play();
    });

    cardContainer.addEventListener("mouseleave", () => {
      tl.reverse();
    });
  });
}




})();

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>