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.

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 *

Home Screencasts Best of Newsletter Search X

๐Ÿ“– 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X