That’s proper—it seems we will animate a number of the CSS Grid properties! As we speak, we’ll see this conduct in motion by constructing a responsive picture grid with hover results. Taking this chance, we’ll additionally make the most of the highly effective :has() CSS selector.
Let’s get began!
Our Picture Grid
Right here’s what we’ll create—make sure you view the full screen demo on a large screen (≥900px) and hover over the playing cards:
1. The Markup
We’ll begin by inserting six playing cards inside a container. We’ll wrap the primary three and the final two inside nested containers, as you possibly can see from the markup beneath:
1 |
<div class="grid"> |
2 |
<div class="sub-grid sub-grid-1"> |
3 |
<article class="card">...</article> |
4 |
<article class="card">...</article> |
5 |
<article class="card">...</article> |
6 |
</div>
|
7 |
<article class="card">...</article> |
8 |
<div class="sub-grid sub-grid-2"> |
9 |
<article class="card">...</article> |
10 |
<article class="card">...</article> |
11 |
</div>
|
12 |
</div>
|
Now, every card could have the next construction:
1 |
<article class="card"> |
2 |
<determine>
|
3 |
<img width="IMG_WIDTH" peak="IMG_HEIGHT" src="IMG_URL" alt=""> |
4 |
<figcaption>
|
5 |
<div>
|
6 |
... |
7 |
<span>
|
8 |
by <a href="UNSPLASH_URL" goal="_blank">...</a> |
9 |
</span>
|
10 |
</div>
|
11 |
</figcaption>
|
12 |
</determine>
|
13 |
</article>
|
2. The Kinds
On small screens (<900px), all playing cards will probably be stacked and their information will probably be seen.
On bigger screens, we’ll have a three-column format.
Right here, there will probably be two eventualities that will probably be checked with the assistance of the hover media question:
- If we see the web page from a tool that doesn’t assist hover, our gallery will seem like this.
- If we see the web page from a desktop browser or a tool with a hover, the gallery format will change to this:
In that case, we’ll grayscale all playing cards and conceal their particulars. When the person hovers a card, we’ll enhance its dimension and present its information. Extra on that in a second.
Three-Column Format
Let’s talk about our three-column format a bit extra totally.
- We’ll set it up utilizing CSS Grid.
- The primary column will probably be twice the scale of the opposite two.
- Inside the primary column, we’ll have a nested grid the place the third column will probably be twice the scale of the opposite two and sit beneath them. The rows’ peak will probably be 40vh and customizable via the
--half-heightCSS variable. - The peak of the primary column will probably be twice the peak of the opposite two (80vh). Once more, we will customise it via the
--heightCSS variable. - Contained in the third column, we’ll have a nested grid the place the columns will probably be stacked, and the rows’ peak will probably be additionally 40vh.
Listed below are the associated kinds:
1 |
:root { |
2 |
--height: 80vh; |
3 |
--half-height: calc(var(--height) / 2); |
4 |
}
|
5 |
|
6 |
@media (min-width: 900px) { |
7 |
.grid, |
8 |
.sub-grid { |
9 |
show: grid; |
10 |
}
|
11 |
|
12 |
.grid { |
13 |
grid-template-columns: 2fr 1fr 1fr; |
14 |
}
|
15 |
|
16 |
.sub-grid { |
17 |
grid-template-rows: var(--half-height) var(--half-height); |
18 |
}
|
19 |
|
20 |
.sub-grid-1 { |
21 |
grid-template-columns: 1fr 1fr auto; |
22 |
}
|
23 |
|
24 |
.sub-grid-1 .card:last-child { |
25 |
grid-column: 1/-1; |
26 |
}
|
27 |
|
28 |
/*.sub-grid-2 {
|
29 |
grid-template-columns: 1fr;
|
30 |
}*/
|
31 |
}
|
Hover Impact
Every time we hover a card/column, we’ll increase its width or peak to supply a zoom impact. As we’ve used CSS Grid to construction the format, we’ve to replace the values of the grid-template-rows and grid-template-columns properties on hover.
However, right here’s the factor: these properties are set on the ancestor component and never on the cardboard itself. Usually, we’d use JavaScript to replace them, however fortunately, the :has() relational selector makes it potential.
Animation #1
Let’s see how this selector works in motion.
Contemplate the second column of our grid.
Initially, we have now this rule:
1 |
.grid { |
2 |
grid-template-columns: 2fr 1fr 1fr; |
3 |
transition: all 1s; |
4 |
}
|
As quickly as we hover over that card, it’ll increase to cowl the entire grid width.
The CSS rule that may do the magic is that this one:
1 |
.grid:has(> .card:hover) { |
2 |
grid-template-columns: 0fr 1fr 0fr; |
3 |
}
|
The rule above will verify if an instantaneous grid column is being hovered. If that situation is fulfilled, it’ll replace the worth of the grid-template-columns property in order that the primary and third columns turn out to be hidden whereas the primary one expands to occupy their house.
Use 0fr as an alternative of 0 to make the animation work!
Animation #2
Let’s see one other instance.
Contemplate the primary nested column of the primary column.
Initially, we have now this rule:
1 |
.sub-grid-1 { |
2 |
grid-template-columns: 1fr 1fr auto; |
3 |
transition: all 1s; |
4 |
}
|
As quickly as we hover over that card, it’ll double its dimension and conceal the second card like this:
The CSS rule that may do the magic is that this one:
1 |
.grid:has(.sub-grid-1 .card:first-of-type:hover) .sub-grid-1 { |
2 |
grid-template-columns: 1fr 0fr auto; |
3 |
}
|
The rule above will verify if the primary nested column of the primary grid column (which acts as a grid container) is being hovered. If that situation is fulfilled, it would replace the worth of the grid-template-columns property in order that the second nested column turns into hidden whereas the primary one expands to occupy its house.
Use 0fr as an alternative of 0 to make the animation work!
Animation #3
Let’s end with one other instance.
Contemplate the primary nested column of the third column.
Initially, we have now this rule:
1 |
.sub-grid-2 { |
2 |
grid-template-rows: 40vh 40vh; |
3 |
transition: all 1s; |
4 |
}
|
As quickly as we hover over that card, it’ll double its peak and conceal the second card like this:
The CSS rule that may do the magic is that this one:
1 |
.grid:has(.sub-grid-2 .card:first-of-type:hover) .sub-grid-2 { |
2 |
grid-template-rows: 80vh 0; |
3 |
}
|
The rule above will verify if the primary nested column of the third grid column (which acts as a grid container) is being hovered. If that situation is fulfilled, it would replace the worth of the grid-template-rows property in order that the second nested column turns into hidden whereas the primary one expands vertically to occupy its house.
You’ll be able to see the remainder of the kinds by clicking on the CSS tab of the demo—I’ve used CSS nesting for the cardboard kinds.
Conclusion
Accomplished! Throughout this tutorial, we realized how one can animate CSS Grid layouts with the assistance of the highly effective :has() CSS pseudo-class. Hopefully, you loved our undertaking and gained some new data.
Once more, right here’s what we constructed as we speak:
As at all times, thanks so much for studying!
