CSS Grid – increase element at hover

DanielNovember 24, 2023November 27, 2023

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.