Объекты CSS в div перемещаются при зависании

Question

В настоящее время я помогаю другу, добавляя значки социальных сетей на его сайт. Я хотел использовать классный зависающий эффект, но когда я наводил значки, они перемещаются внутри div. Это не очень удивительно, но я не мог найти другого способа, кроме настройки прокладки, так что похоже, что они не двигаются. Это выглядит не совсем прилично и нечестно.

<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>

Я не хочу, иконки для перемещения по горизонтали и по вертикали при наведении курсора на одну из иконок. Как я могу это исправить?

Answer 1

Не переставляйте размер шрифта. Используйте scale(). Это не повлияет на окружающие элементы.

Если вы переместите transition в состояние по умолчанию, а состояние :hover, вы не получите эту «привязку» к размеру по умолчанию.

<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>