1

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

2 Respostas 2

1

Pronto. Alterei algumas classes e estilos:

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 4px;
    list-style: none outside none;
    display: inline-block;
}
.social ul li a{display: table;}
.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;
border: 1px solid white;

}

.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;
}

.teste{    width: 40px;
    height: 40px;display: table;}
.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; 
}
    <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">
<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" id="pin-a"></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>

0

Adicione vertical-align: middleaos itens da lista, assim

.social ul li {
    margin: 4px;
    list-style: none outside none;
    display: inline-block;
    vertical-align: middle;
}

Exemplo funcionando aqui

1
  • Leonardo, muito obrigado, deu super certo. Só faltou uma única coisa. Quando o ícone aumenta e fica do tamanho da borda, se você observar(fiz isso aumentando o zoon), ele está aproximadamente uns 2px à direita da borda ao invés de ficar exatamente cobrindo a borda. Sabe como resolver isso? Commented 8/07/2016 às 15:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .