Create Sibling Fade

randybaum · Dec 6, 2024 · 48f5ba7 · 48f5ba7
commit 48f5ba7
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/Sibling Fade b/Sibling Fade
@@ -0,0 +1,13 @@
+.element {
+  transition: opacity 0.3s;
+}
+
+/* Using the :hover and :not() pseudo-class selectors */
+.container:hover .element:not(:hover) {
+  opacity: 0.5;
+}
+
+/* Or using the :has() pseudo-class */
+.container:has(.element:hover) .element:not(:hover) {
+  opacity: 0.5;
+}