Hover moving element

Asked

Viewed 471 times

0

When applied the 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>

css twitter-bootstrap
  • 1

    You change the font-size in the hover. Isn’t this leaving the larger text? In fact, this is the only thing that changes, because the color of the font remains the same.

  • It is because of the "font-size" you have placed. By giving Hover, it increases the size of the icon. What if you just change the color of the icon instead of changing the font size?

  • has no text, I used the tag <p> just to style better. I need precisely the effect that when passing the mouse increases the icon.

1 answer

2


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

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

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

  • 1

    Sensational, Hugo! I didn’t know it. The solution was very good. I hope it solves the question for wiliamvj

  • 1

    @Rodrigotognin was worth, it seems that already solved she even accepted the answer :). If you are interested search on the properties transform CSS, gives to do a lot of interesting things with them

Browser other questions tagged css twitter-bootstrap

You are not signed in. Login or sign up in order to post.