From c2ed434e410e5d1852b34e45072126834a27dad5 Mon Sep 17 00:00:00 2001
From: Sprise <phanthanhhuy1996@gmail.com>
Date: Mon, 5 Mar 2018 14:44:55 +0700
Subject: [PATCH 1/2] Create sibling-fade.md

---
 snippets/sibling-fade.md | 49 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 snippets/sibling-fade.md

diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md
new file mode 100644
index 000000000..3f5de180b
--- /dev/null
+++ b/snippets/sibling-fade.md
@@ -0,0 +1,49 @@
+### sibling-fade
+
+Fade out siblings around 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>
+```
+
+#### CSS
+
+```css
+nav {
+  cursor: default;
+  display: flex;
+}
+
+a {
+  color: #333;
+  font-weight: bold;
+  font-family: sans-serif;
+  text-decoration: none;
+  padding: 8px 16px;
+  transition: opacity 0.2s;
+}
+
+nav:hover a:not(:hover) {
+  opacity: 0.4;
+}
+```
+
+#### Demo
+
+#### 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.
+
+#### Browser support
+✅ No caveats.

From 2ca1ba3985c5837c3a95700d799f8bfd89006086 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 5 Mar 2018 18:16:46 +1000
Subject: [PATCH 2/2] Update sibling-fade.md

---
 snippets/sibling-fade.md | 76 ++++++++++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 27 deletions(-)

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 -->