title: Css, circles animation how to have them growing on hover and staying on the same line
body: <p>I've 2 problems with the following snippet, I would like that on hover all the circles stay on the same line, they are "simply" pushed on the side.</p>
  
  <p>But I'm struggling, it only seems they are going to the bottom when one of the circle is scaling..</p>
  
  <p>Then, I'm trying to have them as close as possible, maybe because it's not aline, but they don't stick together on resize. And the text move too far away :O</p>
  
  <p>I've seen the scaling option but I can't make it work here. So I'm only using the font-size.</p>
  
  <p>I'm really not good with animations, if someone could give me clues or help me with that I would be grateful! </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-css lang-css prettyprint-override"><code>.bubble {
    display: inline-block;
    position: relative;
    margin-right: -17px;
  }
  
  .bubble p {
    font-size: 12px;
    text-align: center;
    color: rgba(100, 110, 115, 0.6);
  }
  
  .circle:before {
    content: ' \25CF';
    font-size: 80px;
    transition: font 0.5s ease;
    transform-origin: 0 0
  }
  
  .label-top {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
  }
  
  .label-bottom {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
  }
  
  .circle.blue:before {
    color: #306BCE;
  }
  .circle.azure:before {
    color: #05CDF9;
  }
  .circle.yellow:before {
    color: #EEFB11;
  }
  .circle.red:before {
    color: red;
  }
  .circle.bordeau:before {
    color: #C90035;
  }
  .circle.purple:before {
    color: #832A50;
  }
  .circle.brown:before {
    color: #6C000C;
  }
  
  .circle:hover:before {
    font-size: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="bubble"&gt;
      &lt;span class="circle blue"&gt;&lt;/span&gt;
      &lt;p class="label-bottom"&gt;Honesty&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;p class="label-top"&gt;Confidence&lt;/p&gt;
      &lt;span class="circle azure"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;span class="circle yellow"&gt;&lt;/span&gt;
      &lt;p class="label-bottom"&gt;Curiosity&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;p class="label-top"&gt;Passion&lt;/p&gt;
      &lt;span class="circle red"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;span class="circle bordeau"&gt;&lt;/span&gt;
      &lt;p class="label-bottom"&gt;Judging&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;p class="label-top"&gt;Disagree&lt;/p&gt;
      &lt;span class="circle purple"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="bubble"&gt;
      &lt;span class="circle brown"&gt;&lt;/span&gt;
      &lt;p class="label-bottom"&gt;Nervousness&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>