View Transitions

In practice, we need to give the same

• style="view-transition-name: call-out-img-1" on the given image on the 2 pages
• style="view-transition-name: call-out-title-1" on the given title on the 2 pages

This is done manually on the first Card below... but the goal would be to have this done dynamically, for example on the dynamic grid of 4 articles below, named "View Transition 1" to "View Transition 4".
Click on the Title or Image below to see it in action!

Documentation:

https://www.bram.us/ 
https://developer.chrome.com/docs/web-platform/view-transitions 
https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
https://youtu.be/quvE1uu1f_I?si=yZBegRag85OP4fxW&t=945
https://view-transitions.chrome.dev/profiles/mpa/ (nice demo!)
https://view-transitions.chrome.dev/profiles/mpa/scripts.js (javascript of this nice demo to inject the view-transition-name "live"... Could be a source of inspiration)
https://cydstumpel.nl/a-practical-guide-to-the-css-view-transition-api/ (added 2025.04.01)
https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/ (see second example! added 2025.04.04)