Fade siblings on hover, css only

Minimal example of fading an element's sibling on hover.

by Jake

HTML

<!-- 
@hattip  https://www.trysmudford.com/blog/fade-out-siblings-css-trick/ 
-->
<div class="fade-kids">
  <a href="#">My First Thing</a>
  <a href="#">My Second Thing</a>
  <a href="#">Another thing</a>
</div>

SCSS

.fade-kids a {
  display: block;
  transition: 0.3s transform;
  margin: 1.5em;
  float:left;
}

.fade-kids:hover a:not(:hover) {
    opacity: 0.5;
}

.fade-kids a:hover {
    opacity: 1;
    transform: scale(1.2);
}