I've made an Icon Sidebar which consists of different icons that get bigger on mousehover. If i hover over the top icons every other icon that is below the one i hovered over, shifts downwards. So my question is how do i prevent the shifting of the icons. Thank you.

```
<div id="icon-bar" class="visible">
    <a href="#"><i class="fa fa-home"></i> 
    <span class="description">Home</span></a>
    <a href="#"><i class="fa fa-gamepad"></i>
    <span class="description">Games</span></a>
    <a href="#"><i class="fa fa-images"></i>
    <span class="description">Gallery</span></a>                            
</div>

<style>
#icon-bar {
width:100px;
height:100%;
background-color:blue;
position:absolute;
bottom:0px;
left:0px;
box-shadow:5px -10px 10px -2px #111;
}

#icon-bar a {
display:block;
text-align:center;
padding:20px;
color:white;
font-size:47px;
transition: all .2s ease-in-out;
}

#icon-bar a:hover {
background-color: #CF0B61;
transform: scale(1.2, 1.2);
}

.description{
display:none;
font-size:12px;
text-align:center;
}

#icon-bar a:hover .description {
display:block;
}

</style>

```

jsfiddle: <https://jsfiddle.net/az0om9dr/>