title: Get Font Awesome container to get bigger on hover (javascript)
body: <p>I've got these FA icons for a bunch of buttons. I would like them to get bigger one at a time when hovering them. The others would consequently move to the sides a bit. I thought about javascript to do that and tried this but it didn't work :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function hoverIcons(classnm) {
    document.getElementById(classnm).css({height: '+=10%', width: '+=10%'});
  }
  
  function nothoverIcons(classnm) {
    document.getElementById(classnm).css({height: '+=10%', width: '+=10%'});
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mainicons{
  position:fixed;
  bottom:20px;
  right:193px;
  text-align:center;  
  }
   
  #mainicons i{
  display:inline-block;
  margin-top:0;
  margin-left:-3px;
  height:30px;
  width:50px;
  padding:10px;
  color:{color:Main icon};
  background:{color:Main icon background};
  text-transform:uppercase;
  font-size:15px;
  line-height:30px;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
  }  
   
  #mainicons i:hover{
  color:{color:Hover};
  background:{color:Main icon};
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s  ease;
  -o-transition: all .7s  ease;
  transition: all .7s  ease;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')"&gt;
  &lt;a href="/" title="Home"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="/ask" title="Ask"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="/submit" title="Request"&gt;&lt;i class="fa fa-pencil "&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="/archive" title="Archive"&gt;&lt;i class="fa fa-clock-o"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for taking the time to respond!</p>