document.addEventListener("DOMContentLoaded", () => {
const items = document.querySelectorAll(".gsap-hover-image");
items.forEach(item => {
const hoverLayer = item.querySelector(".hover-layer");
if (!hoverLayer) return;
// Set initial state (just in case)
gsap.set(hoverLayer, { opacity: 0 });
// Create timeline
const tl = gsap.timeline({ paused: true });
tl.to(hoverLayer, {
opacity: 1,
duration: 1.6,
ease: "power1.inOut"
});
// Hover events
item.addEventListener("mouseenter", () => tl.play());
item.addEventListener("mouseleave", () => tl.reverse());
});
});