CSS view-transition-name Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Layout and basic styles */
.app {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    max-width: 900px;
    margin: 32px auto;
    padding: 0 16px;
}

.grid {
    display: flex;
    gap: 16px;
}

.thumb {
    width: 300px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Assign a view-transition-name so the same visual element in both states is matched */
.hero {
    view-transition-name: hero;
}

/* Detail view */
.detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.detail .frame {
    width: 80%;
    max-width: 700px;
}

.detail img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.hidden {
    display: none;
}

/* Animate the shared element during view transitions using the name 'hero' */
::view-transition-old(hero),
::view-transition-new(hero) {
    /* animate transform, border-radius and shadow for a smooth hero-image transition */
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1),
                border-radius 420ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 420ms;
    transform-origin: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Optional: style the image snapshot used during the transition */
::view-transition-image(hero) {
    border-radius: 10px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));
}</style></head><body><div class="app">
    <div class="gallery">
        <h1>Gallery (click on image)</h1>
        <div class="grid">
            <img src="https://picsum.photos/id/1015/300/200" alt="Mountains" class="thumb hero" />
            <img src="https://picsum.photos/id/1025/300/200" alt="Horse" class="thumb hero" />
            <img src="https://picsum.photos/id/1035/300/200" alt="Forest" class="thumb hero" />
        </div>
    </div>

    <div class="detail hidden">
        <button class="back">← Back</button>
        <div class="frame">
            <img src="" alt="Detail" class="hero" />
        </div>
    </div>
</div>

<script>
    const gallery = document.querySelector('.gallery');
    const detail = document.querySelector('.detail');
    const detailImg = detail.querySelector('img');

    gallery.querySelector('.grid').addEventListener('click', (e) => {
        const img = e.target.closest('img');
        if (!img) return;
        const src = img.src;

        const swap = () => {
            gallery.classList.add('hidden');
            detailImg.src = src;
            detail.classList.remove('hidden');
        };

        if (document.startViewTransition) {
            document.startViewTransition(swap);
        } else {
            swap();
        }
    });

    document.querySelector('.back').addEventListener('click', () => {
        const swap = () => {
            detail.classList.add('hidden');
            gallery.classList.remove('hidden');
        };

        if (document.startViewTransition) {
            document.startViewTransition(swap);
        } else {
            swap();
        }
    });
</script></body></html>