<ul class="gallery">
<li class="gallery-card" tabindex="0">
<img class="gallery-card__img" alt="" src="https://picsum.photos/400" />
<p class="gallery-card__caption">Candy canes ice cream
</p>
</li>
<li class="gallery-card" tabindex="0">
<img class="gallery-card__img" alt="" src="https://picsum.photos/600" />
<p class="gallery-card__caption">Ice cream
biscuit
</p>
</li>
<li class="gallery-card" tabindex="0">
<img class="gallery-card__img" alt="" src="https://picsum.photos/650" />
<p class="gallery-card__caption">Cream
biscuit marzipan
</p>
</li>
</ul>
// Learn how this was created:
// @link https://moderncss.dev/animated-image-gallery-captions-with-bonus-ken-burns-effect/
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Baloo 2", sans-serif;
background-color: #221d23;
padding: 2rem 0.5rem;
}
.gallery {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
width: 100%;
max-width: calc(40ch * 3 + 6rem);
}
.gallery-card {
display: grid;
grid-template-areas: card;
place-items: end;
// position: relative;
overflow: hidden;
height: 40vh;
border: 1px solid #c9c9c9;
border-radius: 7px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
background-color: #000;
&:focus {
outline: none;
}
// Vignette effect
&:after {
content: "";
grid-area: card;
width: 100%;
height: 100%;
box-shadow: inset 0 0 2rem 1rem rgba(black, 0.5);
z-index: 1;
}
.gallery-card__img,
.gallery-card__caption {
grid-area: card;
}
&:hover,
&:focus {
.gallery-card__img {
transform: scale(1.3) translate(-8%, -3%);
}
.gallery-card__caption {
transform: translateY(0);
}
}
}
.gallery-card__img {
object-fit: cover;
width: 100%;
height: 40vh;
display: block;
transform: scale(1.2) translate(-5%, 0);
transition: transform 1200ms ease-in;
will-change: transform;
}
.gallery-card__caption {
transform: translateY(100%);
transition: 400ms transform 800ms ease-in;
will-change: transform;
text-align: right;
display: inline;
padding: 0.25em 0.5em;
margin: 0;
border-radius: 4px 0 0 0;
background-color: rgba(#fff, 0.87);
z-index: 2;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.