Css, circles animation how to have them growing on hover and staying on the same line

Question

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.

But I'm struggling, it only seems they are going to the bottom when one of the circle is scaling..

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

I've seen the scaling option but I can't make it work here. So I'm only using the font-size.

I'm really not good with animations, if someone could give me clues or help me with that I would be grateful!

.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;
}

<div>
  <div class="bubble">
    <span class="circle blue"></span>
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble">
    <p class="label-top">Confidence</p>
    <span class="circle azure"></span>
  </div>
  <div class="bubble">
    <span class="circle yellow"></span>
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble">
    <p class="label-top">Passion</p>
    <span class="circle red"></span>
  </div>
  <div class="bubble">
    <span class="circle bordeau"></span>
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble">
    <p class="label-top">Disagree</p>
    <span class="circle purple"></span>
  </div>
  <div class="bubble">
    <span class="circle brown"></span>
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

Answer 1

As what @CBroe has pointed out, you are using a font glyph as the circle. By changing its font size, you are changing the line-height and that will mess up the vertical positioning of all elements in the row. The trick is to use pseudo-elements to create the circles instead, and position the circles absolutely. Once that is done, you can use transform: scale(...) to scale up the circles, without affecting the layout of surrounding elements.

I have also made some changes to your code:

• Using display: flex to align your bubble elements. You may also use float: left on the bubble elements, but flexbox is quite widely supported today.
• Do not set the transform origin, because it defaults to center center anyway :)

.bubble-wrapper {
  display: flex;
}
.bubble {
  position: relative;
  width: 40px;
  height: 90px;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.circle {
  display: block;
  width: 40px;
  height: 40px;
}

.circle:before {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  content: ' ';
  transition: all 0.5s ease;
  position: absolute;
  top: 25px;
}

.label-top {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle.blue:before {
  background-color: #306BCE;
}

.circle.azure:before {
  background-color: #05CDF9;
}

.circle.yellow:before {
  background-color: #EEFB11;
}

.circle.red:before {
  background-color: red;
}

.circle.bordeau:before {
  background-color: #C90035;
}

.circle.purple:before {
  background-color: #832A50;
}

.circle.brown:before {
  background-color: #6C000C;
}

.circle:hover:before {
  transform: scale(2.5);
}

<div class="bubble-wrapper">
  <div class="bubble">
    <span class="circle blue"></span>
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble">
    <p class="label-top">Confidence</p>
    <span class="circle azure"></span>
  </div>
  <div class="bubble">
    <span class="circle yellow"></span>
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble">
    <p class="label-top">Passion</p>
    <span class="circle red"></span>
  </div>
  <div class="bubble">
    <span class="circle bordeau"></span>
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble">
    <p class="label-top">Disagree</p>
    <span class="circle purple"></span>
  </div>
  <div class="bubble">
    <span class="circle brown"></span>
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

Update: If you want the width of the element to expand on hover, that is also possible. However, I also suggest that you can simplify your markup: basically we can make do without the circle div:

.bubble-wrapper {
  display: flex;
}
.bubble {
  position: relative;
  width: 40px;
  height: 90px;
  transition: all 0.5s ease;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.bubble:before {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  content: ' ';
  transition: all 0.5s ease;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

.label-top {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.bubble.blue:before {
  background-color: #306BCE;
}

.bubble.azure:before {
  background-color: #05CDF9;
}

.bubble.yellow:before {
  background-color: #EEFB11;
}

.bubble.red:before {
  background-color: red;
}

.bubble.bordeau:before {
  background-color: #C90035;
}

.bubble.purple:before {
  background-color: #832A50;
}

.bubble.brown:before {
  background-color: #6C000C;
}

.bubble:hover {
  width: calc(40px * 2.5);
}
.bubble:hover:before {
  transform: translateX(-50%) scale(2.5);
}

<div class="bubble-wrapper">
  <div class="bubble blue">
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble azure">
    <p class="label-top">Confidence</p>
  </div>
  <div class="bubble yellow">
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble red">
    <p class="label-top">Passion</p>
  </div>
  <div class="bubble bordeau">
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble purple">
    <p class="label-top">Disagree</p>
  </div>
  <div class="bubble brown">
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

Answer 2

I've used @Terry's excellent answer as the base to mine.

The main difference is that you don't need the pseudo elements. Just transform: scale() (transforms don't effect the layout) the hovered elements, and give it z-index: 1 if you want to bring them to the top.

.bubble-wrapper {
  display: flex;
}
.bubble {
  position: relative;
  width: 40px;
  height: 90px;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.circle {
  display: block;
  position: relative;
  width: 40x;
  height: 40px;
  border-radius: 50%;
  content: ' ';
  transition: all 0.5s ease;
}

.label-top {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle.blue {
  background-color: #306BCE;
}

.circle.azure {
  background-color: #05CDF9;
}

.circle.yellow {
  background-color: #EEFB11;
}

.circle.red {
  background-color: red;
}

.circle.bordeau {
  background-color: #C90035;
}

.circle.purple {
  background-color: #832A50;
}

.circle.brown {
  background-color: #6C000C;
}

.circle:hover {
  z-index: 1;
  transform: scale(2.5);
}

body {
  padding: 40px;
}

<div class="bubble-wrapper">
  <div class="bubble">
    <span class="circle blue"></span>
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble">
    <p class="label-top">Confidence</p>
    <span class="circle azure"></span>
  </div>
  <div class="bubble">
    <span class="circle yellow"></span>
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble">
    <p class="label-top">Passion</p>
    <span class="circle red"></span>
  </div>
  <div class="bubble">
    <span class="circle bordeau"></span>
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble">
    <p class="label-top">Disagree</p>
    <span class="circle purple"></span>
  </div>
  <div class="bubble">
    <span class="circle brown"></span>
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

Answer 3

.bubble {
    display: inline-block;
    position: relative;
    /* margin-right: -17px; */
    vertical-align: middle;
}

.circle:hover:before {
    /* font-size: 200px; */
    width: 100px;
    height: 100px;
}

.circle.blue:before {
    background: #306BCE;
    /* width: 50px; */
    /* height: 50px; */
    /* display: block; */
}

.circle:before {
    content: '';
    font-size: 80px;
    transition: font 0.5s ease;
    transform-origin: 0 0;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    background: red;
}