Practice with grid and cat photos
I’d like to build some sort of image slideshow that shows a group of images and then rotates a random image into the largest element within the group at a preset interval. This is the starting point. I think it would be interesting to build in different grid layouts, based on aspect ration and more, and allow the viewer to customize it. I’ll tackle the customization and fancy stuff once I finally get it working.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<figure>
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="featured">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="featured">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="featured">
<img src="https://placekitten.com/600/600?image=7" alt="Cute kitten with cute face" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure>
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
</div>
</div>CSS
@supports (display: grid) {
.photo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
max-width: 800px;
max-height: 800px;
gap: 1rem;
margin: 1rem auto;
overflow: hidden;
}
.photo-grid > * {
box-shadow: inset 0 0 1px black;
}
.photo-grid figure {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
}
.photo-grid figure > img {
width: 100%;
height: auto;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.photo-grid figure > figcaption {
grid-column: 1 / 2;
grid-row: 1 / 2;
padding: .5rem;
align-self: flex-end;
color: transparent;
transition: color 1s ease-out;
}
.photo-grid figure:hover > figcaption {
color: black;
}
.featured {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
}
}