Program to Create a Grid Layout with Hover Effect in CSS

In this program, we will learn how to create a grid layout using HTML and CSS. The grid layout will have multiple div elements arranged in a grid pattern. Each div element will have a green background color and padding. Additionally, we will apply a hover effect to the div elements, where upon hovering over a specific div, it will expand and cover the entire grid while causing the adjacent divs to change their background color.

Code

//HMTL

<div class="container">

 <div id="a" class="box">Div A</div>
<div id="b" class="box">Div B</div>
<div id="c" class="box">Div C</div>
<div id="d" class="box">Div D</div>
<div id="e" class="box">Div E</div>
<div id="f" class="box">Div F</div>

</div>


//CSS
body {
  font-family: arial;
  font-weight: 600;
  color: white;
  font-size: 2em;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10%;
  text-align: center;
  grid-gap: 40px;
}

.box {
   background-color: green;
   padding: 20px;
  
}

#a {


}

#a:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#a:hover ~ #b {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#a:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#a:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

#b:hover {
     grid-column: 1 / 4;
     grid-row: 1/6;
}

#b:hover ~ #a {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #c {
    background: #ccc;
        grid-column: 4;
}

#b:hover ~ #d {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #e {
    background: #ccc;
            grid-column: 4;

}

#b:hover ~ #f {
    background: #ccc;
            grid-column: 4;

}

Code Explanation

To create the grid layout, we start with an HTML container div with a class of “container”. Inside the container div, we have six div elements, each with a class of “box”.

In the CSS section, we define the styling for the body element, setting the font family, weight, color, and size.

For the container class, we use the “display: grid” property to enable the grid layout. We set the “grid-template-columns” property to “repeat(3, 1fr)” to create three equal columns in the grid. The “padding” property adds some space around the grid, and the “text-align” property centers the content within each div. The “grid-gap” property adds a gap of 40 pixels between each div.

The box class defines the styling for the div elements. It sets the background color to green and adds padding.

Next, we define hover styles for the div elements. When hovering over div element “a”, we set its grid column to span from 1 to 4 and its grid row to span from 1 to 6, effectively expanding it to cover the entire grid. We also change its background color to light gray. Using the “~” selector, we specify styles for the adjacent div elements when div “a” is hovered. The adjacent div elements “b” to “f” change their background color to light gray and move to the right by occupying grid column 4.

Similarly, we define hover styles for the div elements “b” to “f”. When hovering over these div elements, they expand to cover the entire grid and change the background color of the adjacent div elements to light gray.

Overall, this program demonstrates how to create a visually appealing grid layout with hover effects using HTML and CSS.

Also checkout the following codes.

Program to Iterate Over an Array and Break at a Specified Value
How to Convert Vowels in a Text to Double Letters using JavaScript