CSS Animation Example: Caption Slide-Up

The "Caption Slide-Up" is a classic interaction used in image galleries and article grids to keep a clean aesthetic until the user interacts for more context.

Ocean Voyage

Explore unseen territories.

To implement this, we pair position: absolute with overflow: hidden on the parent card. We position the caption securely at the bottom using bottom: 0, but then immediately shove it out of frame downwards by applying transform: translateY(100%). Since 100% in a translate function resolves relative to the element's own height, it tucks itself perfectly below the visual edge. On hover, we simply reset it to translateY(0) via a transition.

Here is the code to create the Caption Slide-Up animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.card {
    position: relative;
    width: 300px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The caption overlay starting state */
.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px;
    box-sizing: border-box;
    /* Move caption entirely out of frame downwards */
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.caption h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.caption p {
    margin: 0;
    font-size: 0.9rem;
    color: #ccc;
}

/* On hover, slide the caption back into view */
.card:hover .caption,
.card:focus-within .caption {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .caption {
        transition: none; /* Instant snap */
    }
}
</style>

<div class="card" tabindex="0">
    <img src="/pix/samples/30m.jpg" alt="Beach photo demonstrating zoom effect" />
    <div class="caption">
        <h3>Ocean Voyage</h3>
        <p>Explore unseen territories.</p>
    </div>
</div>

View Output

Accessibility Considerations

Because sliding overlays constitute broad motion patterns, some users might find it uncomfortable. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. We handle this by removing the transition duration for users who have this setting enabled on their device.

Without the transition, hovering instantly reveals the caption text seamlessly. Also, note the use of :focus-within to ensure keyword navigation (using the "Tab" key) triggers the hover effect properly.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .caption {
        /* Disables the slide effect, popping it into place instantly */
        transition: none; 
    }
}