Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help me understand why this happens? Thank you in advance for your explanation. Examples would be greatly appreciated.
CSS:
.facebookIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-facebook-circled:hover{
color: #3b5998;
font-size: 90px;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.twitterIc{
font-size: 80px;
margin-left: 120px;
-webkit-transition: font-size 0.3s linear;
}
i.icon-twitter-circled:hover {
font-size: 90px;
color: #00aced;
-moz-transition: all 0.3s ease-in;
/* WebKit */
-webkit-transition: all 0.3s ease-in;
/* Opera */
-o-transition: all 0.3s ease-in;
/* Standard */
transition: all 0.3s ease-in;
}
.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}
HTML:
<section id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>