I'm trying to change the size of certain icons when passing the mouse. It turns out that when I hover the mouse the icon even increases in size, but the same one that causes the other icons to leave the place. Not to mention that it is not exactly in place overlapping the edge. Well let's get the images and codes.
CSS and HTML code:
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 4px;
list-style: none outside none;
display: inline-block;
}
.teste i{
width: 40px;
height: 40px;
color: #000;
border: 1px solid #000;
text-align:center;
padding-top: 11px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.teste i:hover{
margin:0;
font-size:46.5px;
transition: all ease 0.3s;
-webkit-transition: .3s all ease; /* É para pega no Chrome e Safira */
-moz-transition: .3s all ease; /* Firefox */
-o-transition: .3s all ease;
padding-top: 1.8px;
padding-left: 0px;
/*border: 1px solid #fff; */
}
.teste .fa-pinterest:hover {
color: #cb2027;
}
.social i {
position:relative;
width: 40px;
height: 40px;
color: #000;
border: 1px solid #000;
font-size: 22px;
text-align:center;
padding-top: 11px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover { /* round facebook icon*/
background: #4060A5;
border: 1px solid #4060A5;
}
.social .fa-twitter:hover { /* round twitter icon*/
background: #00ABE3;
border: 1px solid #00ABE3;
}
.social .fa-google-plus:hover { /* round google plus icon*/
background: #e64522;
border: 1px solid #e64522;
}
.social .fa-github:hover { /* round github icon*/
background: #343434;
border: 1px solid #343434;
}
.social .fa-pinterest:hover { /* round pinterest icon*/
background: #fff;
}
.social .fa-linkedin:hover { /* round linkedin icon*/
background: #0094BC;
border: 1px solid #0094BC;
}
.social .fa-flickr:hover { /* round flickr icon*/
background: #FF57AE;
border: 1px solid #FF57AE;
}
.social .fa-instagram:hover { /* round instagram icon*/
background: #375989;
border: 1px solid #375989;
}
.social .fa-vimeo-square:hover { /* round vimeo square icon*/
background: #83DAEB;
border: 1px solid #83DAEB;
}
.social .fa-stack-overflow:hover { /* round stack overflow icon*/
background: #FEA501;
border: 1px solid #FEA501;
}
.social .fa-dropbox:hover { /* round dropbox icon*/
background: #017FE5;
border: 1px solid #017FE5;
}
.social .fa-tumblr:hover { /* round tumblr icon*/
background: #3a5876;
border: 1px solid #3a5876;
}
.social .fa-dribbble:hover { /* round dribble icon*/
background: #F46899;
border: 1px solid #F46899;
}
.social .fa-skype:hover { /* round skype icon*/
background: #00C6FF;
border: 1px solid #00C6FF;
}
.social .fa-stack-exchange:hover { /* round stack exchange icon*/
background: #4D86C9;
border: 1px solid #4D86C9;
}
.social .fa-youtube:hover { /* round youtube icon*/
background: #FF1F25;
border: 1px solid #FF1F25;
}
.social .fa-xing:hover { /* round xing icon*/
background: #005C5E;
border: 1px solid #005C5E;
}
.social .fa-rss:hover { /* round rss icon*/
background: #e88845;
border: 1px solid #e88845;
}
.social .fa-foursquare:hover { /* round foursquare icon*/
background: #09B9E0;
border: 1px solid #09B9E0;
}
.social .fa-youtube-play:hover { /* round youtube play button icon*/
background: #DF192A;
border: 1px solid #DF192A;
}<style>
</style>
<head>
<title>Bootstrap 3 Social Media Icons Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Load Bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
<!--load font awesome-->
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<div class="col-md-12">
<div class="social">
<ul>
<li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="#"><div class="teste"><i class="fa fa-lg fa-pinterest"></i></div></a></li>
<li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li>
<li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li>
</ul>
</div>When you run the code above you will see that the effect I'm trying to apply is especially on the Pinterest icon.
Anyway, if you can help me, please tell me how. Thanks