Add demo for hidden view transition names and clarify usage in CSS

Author: martrapp

src/content/docs/basics/pseudos.mdx

@@ -184,13 +184,14 @@ On the HTML side, you can hide elements by adding the `hidden` attribute or by p
 |closed `<details>` element|Ignores view transition names inside the `<details>` element as long as they are not part of the first `<summary>` child| 
 
 <style>{`
-  td:nth-child(2) {
+  #hiding-propertiestd td:nth-child(2) {
     white-space: nowrap;
   }
 `}</style>
 
 You can also use CSS properties to hide view transition names:
 
+<div id="hiding-properties">
 |CSS Property|Value|Effect|
 |-|-|-| 
 |`display`|`none`|Ignores view transition names of the subtree, including its root| 
@@ -199,15 +200,30 @@ You can also use CSS properties to hide view transition names:
 |`view-transition-scope`|`all`|Hides view transition names of the subtree from the element's ancestors|
 |`visibility`|`hidden`|<span style="color: red;">Has no effect on hiding view-transition names</span>|
 |`visibility`|`collapse`|<span style="color: orange;">Hides names where it completely removes elements, but shows  inconsistent behaviour between browsers</span>|
+</div>
 
 
 Here, `view-transition-scope` is a relatively new CSS property that is currently supported only in Chrome. With value `all`, it hides the view transition names of its subtree without changing how the elements are rendered. 
 It hides the names from view transitions rooted at an ancestor of the scoped element, but not from a view transition rooted at the scoped element itself or its descendants.
 
 With these mechanisms for hiding view transition names, you can use the same `view-transition-name` multiple times within the same DOM, provided that all but one instance are hidden. 
 
-Looking for an example? This technique is used in the same-document [image morph examples](/demo/BasicS/) on this site, where one element has `display: none` and the other has `display: block`. 
 
+#### A Demo with Hidden Names
+
+The following demo shows how hidden view transition names work in practice. Click on the map to switch between two view states. 
+
+We want the small map to morph into the larger version. So we assign both `<img>` elements a view transition name of "map". Normally, having two elements with the same view transition name on a page would throw an error and prevent the view transition from working. Here the trick is that the maps of the two view states are disjoint. The first state only has the small map, while the second state only has the large map. We call `startViewTransition()` to switch between the states.
+
+<iframe width="100%" style="border: none; height: 500px;" src="/basics/pseudos-hidden-names-example/"
+></iframe>
+
+Whenever the View Transition API captures images, there is only one map rendered, either the small or the big one. And as the API ignores view transition names of elements not being rendered, there is always only one definition of the "map" view transition name, and there are no naming conflicts. The code for this demo can be found [here](https://github.com/vtbag/website/blob/main/src/pages/basics/pseudos-hidden-names-example.astro).
+
+Setting view transition names statically works well for many use cases.
+Knowing that you can indeed use the same name multiple times on the same page, as long as only one of those elements is rendered at a time, greatly simplifies shared image view transitions because you can control them with CSS alone, without needing JavaScript to assign unique names to elements.
+
+On a side note: For more complex scenarios, it is good to know that you can also utilize _view transition types_ to [assign view transition names dynamically](/tips/css/#scoping-with-types).
 
 ### Special Names
 The static user agent stylesheet provides one default name for the document, called `root`.