1
I’m trying to change the size of certain icons by passing the mouse. It turns out that when I move the mouse the icon even increases the size, but the same one that makes the other icons go out of place. Not to mention that it doesn’t exactly stay in place overlapping the edge. Well let’s go 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>By running the above code you 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. Thank you
Leonardo, thank you very much, it worked great. Only one thing was missing. When the icon increases and becomes the size of the border, if you look at it (I did this by increasing the zoon), it is about 2px to the right of the edge rather than exactly covering the edge. You know how to fix this?
– Ulisses Hen