Having a CSS grid container how can we increase the size of an element when it's hovered?
Take the below example:
If you want to see it live you can check it out on Github pages.
Setting up the starting HTMLย for the grid
We will be starting with a basic HTML structure that will serve as the foundation for our 3x3 grid:
<h1>CSS grid increase element hover</h1>
<div class="grid">
<div class="item" tabindex="0">1</div>
<div class="item" tabindex="0">2</div>
<!-- ... -->
<div class="item" tabindex="0">8</div>
<div class="item" tabindex="0">9</div>
</div>
Adding the CSS
Below is the CSS that will allow us to increase the size of a grid element when that element is hovered:
:root {
--col1: 1fr;
--col2: 1fr;
--col3: 1fr;
--row1: 1fr;
--row2: 1fr;
--row3: 1fr;
--cl-main: orangered;
--cl-text: white;
}
.grid {
display: grid;
grid-template-columns: var(--col1) var(--col2) var(--col3);
grid-template-rows: var(--row1) var(--row2) var(--row3);
height: 100vh;
transition: all .2s;
background-color: var(--cl-main);
}
.grid:has(.item:nth-child(3n+1):hover) {
--col1: 2fr;
}
.grid:has(.item:nth-child(3n+2):hover) {
--col2: 2fr;
}
.grid:has(.item:nth-child(3n+3):hover) {
--col3: 2fr;
}
.grid:has(.item:nth-child(n+1):nth-child(-n+3):where(:hover, :focus)) {
--row1: 2fr;
}
.grid:has(.item:nth-child(n+4):nth-child(-n+6):where(:hover, :focus)) {
--row2: 2fr;
}
.grid:has(.item:nth-child(n+7):nth-child(-n+9):hover) {
--row3: 3fr;
}
.item {
text-align: center;
display: grid;
align-content: center;
transition: scale .2s;
overflow: hidden;
border: 2px solid var(--cl-text);
background-color: var(--cl-main);
font-size: 6rem;
color: var(--cl-text);
}
.item:where(:hover, :focus) {
scale: 1.1;
z-index: 2;
box-shadow:0 0 50px 20px rgba(0, 0, 0, 0.5);
}
Some notes on this code:
- the actual resize is triggered by redefining the CSS variables with the prefix
--col
and--row
- I've used some nth child selectors to say that when the grid has a child that is currently being hovered then change that column or row size to
2fr
- if you want to take a look I've written more about how to use the :root selector to define CSS variables
The full code is available on GitHub and here is the live example.
Also, you can take a look at this example of how to make a simple calendar layout with just four lines of CSS.
๐ 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
๐ 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.