hover moving element

Navigation
0

When you apply hover , it moves the elements. 

.iconsHab i{
    color: #0098DA;
    padding: 5px;
    vertical-align: middle
}

.iconsHab i:hover{
    color: #0098DA;
    font-size: 20px;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 
<div class="container">
  <div class="row">
     <div class="hab">
  <p class="iconsHab">
<i class="fab fa-js"></i>
<i class="fab fa-node-js"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-html5"></i>
<i class="fab fa-vuejs"></i>
<i class="fab fa-angular"></i>
<i class="fab fa-react"></i>
<i class="fas fa-coffee"></i>
</p>
</div>                                                              
  </div>  
</div>
    
asked by anonymous 27.07.2018 / 21:26

1 answer

2

Increasing the font size to have this effect is not ideal.

One of the solutions and using transform:scale to increase the size of the icons in :hover . In the case I passed the icon of the normal size 100% scale (1), for 150% scale (1.5) (each 0.1 corresponds to 10% of the original size)

See the example below how it looks. 

.iconsHab i{
    color: #0098DA;
    padding: 5px;
    vertical-align: middle
}

.iconsHab i:hover{
    color: #0098DA;
    transform: scale(1.5);
    color: red;
}
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 
<div class="container">
  <div class="row">
     <div class="hab">
  <p class="iconsHab">
<i class="fab fa-js"></i>
<i class="fab fa-node-js"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-html5"></i>
<i class="fab fa-vuejs"></i>
<i class="fab fa-angular"></i>
<i class="fab fa-react"></i>
<i class="fas fa-coffee"></i>
</p>
</div>                                                              
  </div>  
</div>
    
27.07.2018 / 21:42
How to make input content appear in the alert? Laravel - does not record price when value is NULL