🎁 Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

CSS Grid – increase element at hover

Having a CSS grid container how can we increase the size of an element when it's hovered?

Take the below example:
CSS Grid increase element at hover
If you want to see it live you can check it out on Github pages.

By the way, I've also written about how we can add a hover effect for each row in a CSS grid.

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.


Leave a Reply

Your email address will not be published. Required fields are marked *