• CTRL ALT News
  • Posts
  • Bento Grid with NEON GLOW hover effect [HTML/CSS/Javascript]

Bento Grid with NEON GLOW hover effect [HTML/CSS/Javascript]

Have you ever wondered how people create these beautiful bento grids? And how you can add some extra spice with a cool hover effect? In this article, I will show you how.

Author

CTRL ALT News
December 3rd, 2023

Bento Grid with NEON GLOW hover effect [HTML/CSS/Javascript]

Source code here.

Have you ever wondered how people create these beautiful bento grids? And how you can add some extra spice with a cool hover effect? In this article, I will show you how.

Video version:

Setting things up

The first thing we need to do is create the needed files:

  1. Create a folder of any name.

  2. Inside the folder, create a file called “index.html”

  3. Inside the folder, create a file called “styles.css”

The HTML

The first thing we need to code is the HTML of our card. The following code should be put inside your “index.html” file, notice that there is also a Javascript script included in the code: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
  <div class="grid">
    <div class="div1 gridCell " style="--clr:#00ff44">
      <div class="gridCellLeft">
        <h2>Custom branding</h2>
      </div>
      <div class="gridCellRight">
        <i class="bi bi-brush"></i>
      </div>
    </div>
    <div class="div2 gridCell" style="--clr:#00ffdd">
      <div class="gridCellLeft">
        <h2>Automated workflows</h2>
      </div>
      <div class="gridCellRight">
        <i class="bi bi-gear"></i>
      </div>
    </div>
    <div class="div3 gridCell" style="--clr:#0088ff">
      <div class="gridCellLeft">
        <h2>Real-time collaboration</h2>
      </div>
      <div class="gridCellRight">
        <i class="bi bi-people"></i>
      </div>
    </div>
    <div class="div4 gridCell" style="--clr:#a600ff">
      <div class="gridCellLeft flexCol">
        <h2>Usage analytics</h2>
        <p>Provides detailed analytics on how users are utilizing different features of the product over time, enabling
          product teams to identify areas for improvement or new features based on real customer usage data.</p>
      </div>
      <div class="gridCellRight ">
        <i class="bi bi-archive largeIcon flip"></i>
      </div>
    </div>
    <div class="div5 gridCell" style="--clr:#ff00c8">
      <div class="gridCellLeft">
        <h2>API integrations</h2>
      </div>
      <div class="gridCellRight">
        <i class="bi bi-code-slash largeIcon"></i>
      </div>
    </div>
    <div class="div6 gridCell" style="--clr:#ff0000">
      <div class="gridCellLeft">
        <h2>Custom reports</h2>
      </div>
      <div class="gridCellRight">
        <i class="bi bi-clipboard"></i>
      </div>
    </div>
    <div class="div7 gridCell flexCol" style="--clr:#fff700">
      <div class="gridCellFullSize flexCol">
        <h2>Role-based permissions</h2>
        <p>Allows admin users to configure fine-grained access controls and permissions for different types of users in
          the system, ensuring users only have access to features and data they need.</p>
      </div>

    </div>
    <script>
      const gridCells = document.querySelectorAll(".gridCell")
      gridCells.forEach((gridCell) => {
        gridCell.addEventListener("mousemove", (e) => {
          const x = e.pageX - gridCell.offsetLeft
          const y = e.pageY - gridCell.offsetTop

          gridCell.style.setProperty("--left", x + "px")
          gridCell.style.setProperty("--top", y + "px")
        })
      })
    </script>
</body>
</html>

You might be thinking, how does this work? I will explain this later, once all the code has been created.

The CSS

The next thing we need is our styling. The following code is the CSS code: 

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  height: 750px;
  width: 960px;
}
.gridCell {
  background-color: #050505;
  border: 1px solid #101010;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  display: flex;
  padding: 12px;
}
.gridCellFullSize {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%;
}
.gridCell p {
  line-height: 2;
  font-size: 12px;
  padding: 24px;
  text-align: center;
}
.gridCell h2 {
  font-weight: 900;
  font-size: 18px;
  text-align: center;
}
.gridCell::before {
  content: "";
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  background: radial-gradient(var(--clr), transparent,transparent);
  height: 500px;
  width: 500px;
  opacity: 0;
  transition: 0.5s, top 0s, left 0s;
}

.gridCell:hover::before {
  opacity: 1;
}
.gridCell::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: rgba(5, 5, 5, 0.95);
  border-radius: 10px;
}
.gridCellLeft,
.gridCellRight {
  position: relative;
  z-index: 10;
  height: 100%;
  word-break: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gridCellLeft {
  width: 66%;
}
.gridCellRight {
  width: 34%;
}
.flexCol {
  flex-direction: column;
}
.gridCell i {
  font-size: 64px;
  color: #303030;
  transition: 0.5s, top 0s, left 0s;
}
.largeIcon {
  font-size: 256px !important;
  transform:  translate(50%);
  right: 0;
  position: absolute;
}
.gridCell:hover > .gridCellRight i {
  color: var(--clr);
}



.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 4 / 3; }
.div5 { grid-area: 4 / 2 / 5 / 4; }
.div6 { grid-area: 4 / 1 / 5 / 2; }
.div7 { grid-area: 2 / 3 / 4 / 4; }

How does this work?

The HTML defines a grid layout with 7 grid cells (.gridCell) arranged into rows and columns using CSS grid areas. Each cell contains left and right flexbox containers to lay out the content, except for div7, this div is styled for a full size.

The CSS styles the grid container and cells, including:

  • Flexbox for layout of cell content

  • CSS grid areas to position the cells

  • Border and backgrounds for the visual style

  • Transitions for smooth animations

  • Positioning for the hover effect

The glow effect on hover is created using:

  • radial-gradient with a transparent center on a ::before pseudo element

  • transitioning the opacity and positions on hover

  • z-index layers to place it behind the content

The script adds mousemove event listeners to track the hover position and update the --left and --top CSS variables. This allows the gradient position to follow the mouse for the glow effect.

Key features like variable colors, column layouts, and large icons are added using utility classes to allow reuse and modifications.

How do I view this?

To view your bento grid, simply double-click the “index.html” file.