CSS-only Fade Siblings on Hover

css-only-fade-siblings-on-hover.markdown

CSS-only Fade Siblings on Hover

Fade out all siblings when an item is hovered, using only CSS

A Pen by Shaw on CodePen.

License.

index.html

<div class="sibling-fade">
  <a href="#">Lorem</a>
  <a href="#">Dolor</a>
  <a href="#">Repellat</a>
  <a href="#">Quisquam</a>
  <a href="#">Quidem</a>
  <a href="#">Quae</a>
  <a href="#">Maiores</a>
  <a href="#">Suscipit</a>
  <a href="#">Minima</a>
  <a href="#">Aliquam</a>
  <a href="#">Sapiente</a>
  <a href="#">Sequi</a>
  <a href="#">Sit</a>
  <a href="#">Molestias</a>
  <a href="#">Neque</a>
  <a href="#">Deleniti</a>
  <a href="#">Sint</a>
  <a href="#">Id</a>
  <a href="#">Facilis</a>
  <a href="#">Facere</a>
</div>

scripts

<script src="https://codepen.io/shshaw/pen/epmrgO"></script>

style.css

/* SIBLING FADE: fade out siblings around a hovered item */

.sibling-fade { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.sibling-fade > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.sibling-fade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.sibling-fade:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.sibling-fade > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */







/* Presentational Styles */
html { display: flex; height: 100%; }
body { 
  background: #f05555;
  padding: 10px;
  max-width: 40em;
  margin: auto;
}

.sibling-fade {
  display: flex;
  flex-wrap: wrap;
}

.sibling-fade > * {
  background: white;
  padding: 1em;
  flex: auto;
  margin: 0.3em;
  text-align: center;
  color: #f05555;
  font-size: 1.5em;
  text-decoration: none;
}

/**/