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

.social-link-anchor {
  margin: .5rem;
  padding: .5rem;
  display: inline-block;
  transition: all 0.2s ease;
}
.social-link-anchor:hover {
  -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.16));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.16));
}

.social-icon {
  height: 4em;
  transition: all 0.2s ease;
}
.social-link-anchor:hover .social-icon {
  -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
}

.social-icon.dark {
  opacity: 1;
  position: absolute;
}
.social-link-anchor:hover .social-icon.dark {
  opacity: 0;
  transform: scale(1.1);
}

.social-icon.colorful {
  opacity: 0;
}
.social-link-anchor:hover .social-icon.colorful {
  opacity: 1;
  transform: scale(1.1);
}

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

.social-link-anchor {
  margin: .5rem;
  padding: .5rem;
  display: inline-block;
}

.social-icon {
  height: 4em;
  transition: all 0.2s ease;
}
.social-link-anchor:hover .social-icon {
  -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
}

.social-icon.dark {
  opacity: 1;
  position: absolute;
}
.social-link-anchor:hover .social-icon.dark {
  opacity: 0;
  transform: scale(1.1);
}

.social-icon.colorful {
  opacity: 0;
}
.social-link-anchor:hover .social-icon.colorful {
  opacity: 1;
  transform: scale(1.1);
}

Remove extra shadow on social icons
:art: Remove extra shadow on social icons

Less performant and looks too dark
