diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md
index 3f5de180b..06261c13b 100644
--- a/snippets/sibling-fade.md
+++ b/snippets/sibling-fade.md
@@ -1,49 +1,71 @@
-### sibling-fade
+### Sibling fade
 
-Fade out siblings around a hovered item
+Fades out the siblings of a hovered item.
 
 #### HTML
 
 ```html
-<nav>
-  <a href="#">Item 01</a>
-  <a href="#">Item 02</a>
-  <a href="#">Item 03</a>
-  <a href="#">Item 04</a>
-  <a href="#">Item 05</a>
-  <a href="#">Item 06</a>
-</nav>
+<div class="sibling-fade">
+  <span>Item 1</span>
+  <span>Item 2</span>
+  <span>Item 3</span>
+  <span>Item 4</span>
+  <span>Item 5</span>
+  <span>Item 6</span>
+</div>
 ```
 
 #### CSS
 
 ```css
-nav {
-  cursor: default;
-  display: flex;
-}
-
-a {
-  color: #333;
-  font-weight: bold;
-  font-family: sans-serif;
-  text-decoration: none;
-  padding: 8px 16px;
+span {
+  padding: 0 1rem;
   transition: opacity 0.2s;
 }
 
-nav:hover a:not(:hover) {
-  opacity: 0.4;
+.sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
 }
 ```
 
 #### Demo
 
+<div class="snippet-demo">
+  <nav class="snippet-demo__sibling-fade">
+    <span>Item 1</span>
+    <span>Item 2</span>
+    <span>Item 3</span>
+    <span>Item 4</span>
+    <span>Item 5</span>
+    <span>Item 6</span>
+  </nav>
+</div>
+
+<style>
+.snippet-demo__sibling-fade {
+  cursor: default;
+  line-height: 2;
+  vertical-align: middle;
+}
+
+.snippet-demo__sibling-fade span {
+  padding: 1rem;
+  transition: opacity 0.2s;
+}
+
+.snippet-demo__sibling-fade:hover span:not(:hover) {
+  opacity: 0.5;
+}
+</style>
+
 #### Explanation
 
-1. `display: flex ` enables flexbox.
-2. `transition: opacity 0.2s` means changes to opacity will be transitioned over 0.2 seconds.
-3. `nav:hover a:not(:hover)` changes the opacity of un-hover childs to 0.4.
+1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.
+2. `.sibling-fade:hover span:not(:hover)` specifies that when the parent is hovered, select any `span` children
+   that are not currently being hovered and change their opacity to `0.5`.
 
 #### Browser support
-✅ No caveats.
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: interactivity -->