I am currently helping out a friend by adding social media icons to his website. I wanted to use a cool hovering effect, but when I hover the icons, they'll move inside the div. It's not very surprising, but I couldn't find any other way than adjusting the padding so it looks like they don't move. It doesn't look really decent and is kind of cheaty.
<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
.icons {
position: relative;
padding: 9px;
}
.icons:hover {
color: #4f5255;
font-size: 19px;
transition: font-size 0.2s;
/*padding: 7px;*/
}
div {
height: 100px;
width: 200px;
float: left;
}
</style>
<div>
<a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
<a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
<a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>I don't want the icons to move horizontally and vertically when hovering over one of the icons. How can I fix it?
Don't transition the font-size. Use scale(). This will not effect surrounding elements.
If you move the transition to the default state, rather the the :hover state you won't get that "snap" back to the default size.
<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
.icons {
position: relative;
padding: 9px;
transition: transform 0.2s;
}
.icons:hover {
color: #4f5255;
transform: scale(1.3);
}
div {
height: 100px;
width: 200px;
float: left;
}
</style>
<div>
<a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
<a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
<a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments