Estou tentando alterar o tamanho de certos ícones ao passa o mouse. Acontece que quando passo o mouse o ícone até aumenta o tamanho, mas o mesmo que faz com que os outros ícones saiam do lugar. Sem falar que ele não fica exatamente no lugar sobrepondo a borda. Bom vamos as imagens e códigos.
Código CSS e HTML:
.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>
Ao executar o código acima vocês veram que o efeito que estou tentando aplicar está especialmente no ícone Pinterest.
Enfim, caso possam me ajudar, por favor me digam como. Obrigado