Add a View Transition Name for each product image

Open components/ProductItem.js and add in the right place, after the image src definition:

this.querySelector("img").style.viewTransitionName = `image-${product.id}`

Open components/DetailsPage.js and add in the right place, after the image src definition:

this.root.querySelector("img").style.viewTransitionName = `image-${this.product.id}`

Enable Shadow DOM Parts

Open index.html, find <template id="details-page-template"> and add part="image" to the <img> element.

Apply CSS styles

Open styles.css and add the following code:

details-page::part(image) {
    width: 120%;
    margin-left: -10%;
}

::view-transition-new(image) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in
}

Read more about the API

Check the documentation at https://developer.chrome.com/docs/web-platform/view-transitions