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>