<div class="socialWrapper">
  <h1>
    <span class="hide default">get social</span>
    <span class="hide head1">facebook</span>
    <span class="hide head2">twitter</span>
    <span class="hide head3">google+</span>
    <span class="hide head4">github</span>
    <span class="hide head5">linkedin</span>
  </h1>
  <ul class="social">
    <li><a href="https://facebook.com/arximughal"><i class="fa fa-facebook-square fa-3x"></i></a></li>
    <li><a href="https://twitter.com/arximughal"><i class="fa fa-twitter-square fa-3x"></i></a></li>
    <li><a href="https://plus.google.com/+ArslanAslam123"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
    <li><a href="https://github.com/arximughal"><i class="fa fa-github-square fa-3x"></i></a></li>
    <li><a href="https://pk.linkedin.com/in/marslanaslam"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
  </ul>
</div>

body {
  margin: 0;
  overflow: hidden;
}
.socialWrapper {
  display: block;
  text-align: center;
  height: 100vh;
  padding-top: 15%;
  color: #fff;
  letter-spacing: 2px;
  font-family: "Bangers", cursive;
  text-shadow: 1px 1px #222;
  background: #7b1fa2;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.socialWrapper h1 {
  font-size: 48px;
}
ul.social {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.social li {
  float: left;
}
.social li a {
  color: #e2e2e2;
  margin-right: 10px;
}
.hide {
  display: none;
}
.socialActive1 {
  background: #3b5998;
}
.socialActive2 {
  background: #00aced;
}
.socialActive4 {
  background: #222222;
}
.socialActive5 {
  background: #0077b5;
}
.socialActive3 {
  background: #d34836;
}
.socialWrapper .default {
  display: block;
}
.socialWrapper.socialActive1 .default,
.socialWrapper.socialActive2 .default,
.socialWrapper.socialActive3 .default,
.socialWrapper.socialActive4 .default,
.socialWrapper.socialActive5 .default {
  display: none;
}
.socialWrapper.socialActive1 .head1,
.socialWrapper.socialActive2 .head2,
.socialWrapper.socialActive3 .head3,
.socialWrapper.socialActive4 .head4,
.socialWrapper.socialActive5 .head5 {
  display: block;
}

$(".social li a").each(function (i) {
  $(this).hover(function () {
    $(".socialWrapper").toggleClass("socialActive" + (i + 1));
  });
});