li.social-link {
  display: inline-block;
}

a.social-link {
  margin: .5rem;
  padding: .5rem;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.social-icon {
  height: 4em;
  position: absolute;
}

.social-icon.black {
  opacity: 1;
  transition: opacity 200ms ease;
}
.social-icon.black:hover {
  opacity: 0;
  transition: opacity 200ms ease;
}

.social-icon.color {
  opacity: 0;
  transition: opacity 200ms ease;
}
.social-icon.color:hover {
  opacity: 1;
  transition: opacity 200ms ease;
}

li.social-link {
  display: inline-block;
}

a.social-link {
  margin: .5rem;
  padding: .5rem;
  width: 4em;
  height: 4em;
  display: inline-block;
}

.social-icon {
  height: 4em;
  position: absolute;
}

.social-icon.black {
  opacity: 1;
  transition: all .2s ease;
}
a.social-link:hover .black {
  opacity: 0;
}

.social-icon.color {
  opacity: 0;
  transition: all .2s ease;
}
a.social-link:hover .color {
  opacity: 1;
}

Fix hover state for overlapping elements
:bug: Fix hover state for overlapping elements

Use the hover state of the parent instead.
