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");
  });
});