Interactive Hover Showcase

Interactive Fullscreen Hover Tab Gallery (Pure CSS + JS) 🚀 Introduction In this project, I created a fullscreen hover tab gallery effect using pure CSS and JavaScript. 🎯 Features Smooth background transition Hover based tab switching Fully responsive layout No external library required 🛠️ How It Works Each column has a data-tab attribute. On hover, JavaScript activates the corresponding background image. 💻 JavaScript Logic 🔗 Live Demo js const tabs = document.querySelectorAll(".cluom-box"); tabs.forEach((tab) => { tab.addEventListener("mouseover", function () { tabs.forEach((e) => e.classList.remove("current")); this.classList.add("current"); const tabId = this.getAttribute("data-tab"); document .querySelectorAll(".bg-img") .forEach((img) => img.classList.remove("current")); document.getElementById(tabId).classList.add("current"); }); });