andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
53fb8e67e6bc15027fc995a576467bb4fe3bd288
30-seconds-of-code/snippets/sibling-fade.md
atomiks 39b676c125 Improve usage share count (#138) 
* Improve usage share

* Remove 'No caveats' note from all snippets

* Fix transform-centering usage: #search -> #feat

* transform -> transforms2d

* Add missing link for multiline truncate
2019-02-18 04:35:48 +11:00

832 B
Raw Blame History

Sibling fade

Fades out the siblings of a hovered item.

HTML

<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

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}

.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

Demo

Explanation

  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