Neon Grid Effects: Enhance Design with CSS & JS

The Neon Grid Hover Effect is an interactive visual effect that combines CSS animations and JavaScript to create a glowing hover experience over a dynamically generated grid. This effect gives an immersive neon aesthetic, perfect for modern UI showcases and creative web projects.

🔥 Overview

Hover effects are a crucial part of modern web design, adding interactivity and engagement to user interfaces. The Neon Grid Hover Effect stands out with its vibrant glow, making it ideal for futuristic and creative web designs.

This project dynamically creates a full-screen grid using JavaScript, where each cell reacts to user interaction with a yellow-green neon glow effect. The number of grid elements adapts to the screen size, ensuring a consistent look across various resolutions.

🚀 Features

Dynamic Grid Layout – The grid automatically adjusts based on the screen size.
Smooth Hover Effect – Each box glows when hovered, providing a visually appealing effect.
Optimized Performance – Uses JavaScript for real-time grid resizing while keeping animations smooth.
Fully Responsive – Adapts to different screen sizes without breaking the layout.

🛠️ Technology Stack

HTML – Defines the grid container.
CSS – Handles the neon effect and animations.
JavaScript – Dynamically generates and manages the grid layout.

📝 Code Breakdown

1️⃣ HTML Structure

The HTML file contains a div with the class .grid, which serves as the container for dynamically generated elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Grid Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid"></div>
    <script src="app.js"></script>
</body>
</html>

Explanation:

<link rel="stylesheet" href="style.css"> links the CSS file, ensuring styles are applied.
<div class=”grid”></div> This div serves as a container for the grid layout. The class name grid is used in the CSS file to apply specific styles to this container, such as defining it as a grid layout and setting its dimensions and spacing.
<script src="app.js"></script> is placed at the end of the <body> to ensure that the JavaScript code runs only after the DOM is fully loaded, preventing errors when accessing elements.

2️⃣ Styling the Neon Effect

The CSS file defines the styling for the grid and hover effects. Each grid cell has a transition effect that gives a neon glow when hovered.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
}

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px,1fr));
    grid-template-rows: repeat(auto-fit, minmax(80px,1fr));
    gap: 3px;
    width: 100vw;
    height: 100vh;
}

.box{
    width: 80px;
    height: 80px;
    background-color: black;
    border-radius: 8px;
    transition: 4s ease-in-out;
}

.box:hover{
    transition: 0s;
    background-color: yellow;
    box-shadow: 0 0 30px 10px rgba(255,255,0,0.8),
                0 0 50px 20px rgba(0, 255, 0, 0.6);
}

The provided CSS code is used to style a full-screen grid with a neon hover effect. Here's a breakdown of each part:

Body Styling:
- display: flex; justify-content: center; align-items: center;: Centers the grid container both vertically and horizontally within the viewport.
- height: 100vh;: Sets the height of the body to 100% of the viewport height.
- background-color: black;: Sets the background color of the body to black, providing a dark backdrop for the neon effect.
- margin: 0; overflow: hidden;: Removes any default margin and hides overflow to prevent scrollbars from appearing.
Grid Container (.grid):
- display: grid;: Utilizes CSS Grid Layout to arrange child elements in a grid.
- grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));: Creates columns that automatically fit the available space, with each column having a minimum width of 50px and a flexible width (1fr) to fill the remaining space.
- grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));: Similar to columns, this creates rows that fit the available space with a minimum height of 50px.
- gap: 3px;: Sets a 3px gap between grid items.
- width: 100vw; height: 100vh;: Ensures the grid covers the entire viewport width and height.
Grid Items (.box):
- width: 100%; height: 100%;: Ensures each grid item fills its grid cell completely.
- background-color: black;: Sets the initial background color of each grid item to black.
- border-radius: 8px;: Rounds the corners of each grid item.
- transition: 4s ease-in-out;: Applies a smooth transition effect over 4 seconds for any changes in properties.
Hover Effect (.box:hover):
- transition: 0s;: Removes the transition delay when the hover effect is applied, making the glow appear instantly.
- background-color: yellow;: Changes the background color to yellow when hovered.
- box-shadow: 0 0 30px 10px rgba(255,255,0,0.8), 0 0 50px 20px rgba(0, 255, 0, 0.6);: Adds a neon glow effect with two layers of shadow, one yellow and one green, creating a vibrant neon appearance.

3️⃣ JavaScript for Dynamic Grid Creation

const grid = document.querySelector('.grid');
const cols = Math.ceil(window.innerWidth / 50);
const rows = Math.ceil(window.innerHeight / 50);
const totalBoxes = cols * rows;

for (let index = 0; index < totalBoxes; index++) {
    const box = document.createElement("div");
    box.classList.add('box');
    grid.appendChild(box);
}

The provided JavaScript code dynamically creates a grid of boxes based on the screen size. Here's a breakdown of each part:

Selecting the Grid Container:
- const grid = document.querySelector('.grid');: Selects the HTML element with the class .grid to serve as the container for the grid items.
Calculating Columns and Rows:
- const cols = Math.ceil(window.innerWidth / 50);: Calculates the number of columns by dividing the window's inner width by 50 pixels and rounding up to the nearest whole number. This ensures that each column is at least 50 pixels wide.
- const rows = Math.ceil(window.innerHeight / 50);: Similarly, calculates the number of rows by dividing the window's inner height by 50 pixels and rounding up.
Calculating Total Boxes:
- const totalBoxes = cols * rows;: Determines the total number of boxes needed to fill the grid by multiplying the number of columns by the number of rows.
Creating and Appending Boxes:
- A for loop iterates from 0 to totalBoxes - 1.
- Inside the loop, const box = document.createElement("div"); creates a new div element for each box.
- box.classList.add('box');: Adds the class box to each newly created div, applying the CSS styles defined for .box.
- grid.appendChild(box);: Appends each box to the grid container, effectively adding it to the DOM.

This code ensures that the grid dynamically adjusts to the screen size, filling the available space with boxes.

🎨 Visual Effect in Action

When a user hovers over a box, it changes color to yellow and emits a soft green glow, creating a futuristic neon-style effect.

📌 Potential Use Cases

Background animations for web applications.
Interactive effects for UI elements.
Loading screens with engaging visuals.

💡 Final Thoughts

This Neon Grid Hover Effect is a great example of how simple CSS and JavaScript can be combined to create visually appealing effects. The grid dynamically adjusts to fit any screen size, and the hover effect adds an engaging touch.

Would you like to see more effects like this? Let me know in the comments! 🚀

Neon Grid Hover Effects: Transform Your Web Design with CSS and JavaScript

Table of contents