Code preview
Folder Structure:
Firstly we will create main folder for our project
- Inside it we will create index.html and style.css files to write our code.
- Then we will link css in index.html files
Inroduction
In this project, we’ve created a dynamic hexagon grid with a hover animation effect using pure HTML and CSS. The hexagons are arranged seamlessly, forming a honeycomb-like pattern that continuously changes color using a hue-rotate animation. When hovering over any hexagon, it highlights in a bright green shade, providing an interactive visual experience. The entire background also features a smooth color transition, giving it a lively, animated feel. This design is perfect for creating eye-catching backgrounds for websites or interactive landing pages.
HTML CODE:
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexagon Background Hover Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
<div class="hex">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>
</div>
</body>
</html>
....
Explanation:
The <link> tag is used to include an external CSS file (style.css). The content of the page is wrapped inside a <div> element with the class wrapper, which serves as a container for all the hexagonal patterns.
Within the wrapper, there are multiple <div> elements with the class hex, each containing several child elements with the class hexagon. These hexagon elements are repeated to form rows of hexagonal shapes. The structure is simple yet effective, where each hexagon is individually created and arranged using nested <div> elements.
This repetitive structure allows for easy styling and animations applied via CSS, ensuring each hexagon displays uniformly across different rows. The hex class helps group the hexagons and maintain the layout alignment, while the hexagon class applies styles for the hexagonal shape using the CSS clip-path property.
This modular approach ensures scalability, making it easier to adjust the number of rows or hexagons without altering the core structure.
CSS Code:
...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
min-height: 100vh;
overflow: hidden;
}
.wrapper {
position: relative;
min-height: 100vh;
overflow: hidden;
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.hex {
display: inline-flex;
margin-top: -32px;
margin-left: -50px;
overflow: hidden;
}
.hex:nth-child(even) {
margin-left: 1px;
}
.hexagon {
position: relative;
background-color: #111;
height: 110px;
width: 100px;
margin: 1px;
transition: 2s;
clip-path: polygon(50% 0%,
100% 25%, 100% 75%, 50% 100%,
0% 75%, 0% 25%);
}
.hexagon::before {
position: absolute;
content: '';
height: 100%;
width: 50%;
background: rgba(255, 255, 255, 0.04);
}
.hexagon:hover {
transition: 0s;
background: lime;
}
...
Explanation
The CSS code for this project is designed to transform the HTML structure into a dynamic and visually engaging hexagonal grid. The initial styles reset the default browser padding and margin for all elements using the universal selector (*), ensuring consistent spacing and layout.
The body has a solid black background and minimum height of 100vh, with overflow: hidden to prevent scrollbars from appearing. The main container, .wrapper, is set to fill the full height of the viewport and uses a continuous hue-rotation animation (animate) to smoothly change colors, adding a subtle, dynamic effect to the background.
Each .hex element serves as a row container for hexagons, using display: inline-flex to arrange the hexagons horizontally. The negative margins ensure a tight fit between rows, creating the honeycomb effect.
The hexagons themselves are defined using the .hexagon class, where the clip-path property is key to achieving the hexagonal shape. The hexagons have a background color of dark gray (#111) and are sized with a width of 100px and height of 110px, giving them a slightly elongated shape.
For the hover effect, when a user hovers over a hexagon, the background color changes instantly to lime green, enhancing interactivity. The ::before pseudo-element adds a subtle lighting effect on the left half of each hexagon by overlaying a semi-transparent white gradient, giving the illusion of depth and dimension.
The smooth transitions applied to the hexagons ensure that the hover effect is instantaneous (transition: 0s on hover) while the initial background transition is set to 2s, adding fluidity to any state change. The combination of these styles produces a visually captivating pattern that changes color over time while remaining interactive on hover.
Source Code:
Download “Hexagon-Grid.zip” Hexagon-Grid.zip – Downloaded 0 times – 1.26 KB
Conclusions:
In this project, we successfully created an interactive hexagonal grid background using HTML and CSS, demonstrating how simple code can produce complex visual effects. By leveraging the clip-path property, we transformed basic square elements into hexagons, aligning them seamlessly to form a honeycomb pattern. The continuous background hue-rotation animation added a vibrant, dynamic touch, while the hover effect provided an engaging user interaction by highlighting individual hexagons in bright green. Additionally, we incorporated subtle lighting using pseudo-elements to give a sense of depth. This project showcases how CSS animations and shapes can be combined to create visually appealing, interactive backgrounds suitable for modern web designs.
