You can use this code to show the social network icons on your website more beautifully. In this code the background of these icons is purple in normal mode and each icon in the hover mode changes the background color and the name of the icon is written above it.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bangers'>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://use.fontawesome.com/cece742d74.js'></script>
<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">instagram</span>
<span class="hide head4">github</span>
<span class="hide head5">linkedin</span>
</h1>
<ul class="social">
<li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-instagram fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-github-square fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a></li>
</ul>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
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;
}Javascript
$(".social li a").each(function (i) {
$(this).hover(function () {
$(".socialWrapper").toggleClass("socialActive" + (i + 1));
});
});
