" Social Icon Hover Effects "
Bootstrap 3.0.0 Snippet by harunpehlivan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<div class="social-container-wrap">
<h1 style="color:#ddd;">Socialise With Me</h1>
<br /><br /><br />
<div class="social-container">
<a href="https://twitter.com/HTERCUMANP" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.facebook.com/profile.php?id=100008152065270" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="http://plus.google.com/111320383727376607540/" class="googleplus"><i class="fa fa-google-plus"></i></a>
<a href="https://tr.pinterest.com/harunpehlivan/" class="pinterest"><i class="fa fa-pinterest"></i></a>
<a href="https://codepen.io/harunpehlivan" class="codepen"><i class="fa fa-codepen"></i></a>
<a href="https://dribbble.com/harunpehlivan" class="dribbble"><i class="fa fa-dribbble"></i></a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem/" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://www.udemy.com/user/harunpehlivan2" class="envelope"><i class="fa fa-graduation-cap"></i></a>
</div>
</div>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Poppins:300,900);
body {
font-family: Poppins;
font-weight: 300;margin: 0;
padding: 0;
}
*,:before,:after{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
h1 {
text-align: center;
line-height: 20px;
color: rgba(0,0,0,.8);
}
.social-container-wrap {width:100%;height:600px;margin:auto;background:#0f0f11;padding:50px 0;-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;}
.social-container {
margin: 0 auto;
width: 285px;
height: 260px;
padding-left: 30px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
text-align: center;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(".twitter").hover(function () {$(".social-container-wrap").toggleClass("color-twitter")});
$(".facebook").hover(function () {$(".social-container-wrap").toggleClass("color-facebook")});
$(".googleplus").hover(function () {$(".social-container-wrap").toggleClass("color-googleplus")});
$(".pinterest").hover(function () {$(".social-container-wrap").toggleClass("color-pinterest")});
$(".dribbble").hover(function () {$(".social-container-wrap").toggleClass("color-dribbble")});
$(".instagram").hover(function () { $(".social-container-wrap").toggleClass("color-instagram") });
$(".codepen").hover(function () { $(".social-container-wrap").toggleClass("color-codepen") });
$(".envelope").hover(function () { $(".social-container-wrap").toggleClass("color-envelope") });
$(".linkedin").hover(function () { $(".social-container-wrap").toggleClass("color-linkedin") });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular
Navbar with Social icon & Dropdown
Animated 3d social icon in css3
Bootstrap 4 Navbar with Icon Top

Questions / Comments: