Showing a growing div onmouseover - html

Question

This is my goal:
Some circular buttons that have an hover state: on mouseover, a black container with some text (with different length) should appear growing from left to right.
I didn't know how to do that. My doubts are about how to set the two different width because it should be from 0 to auto but if it's 0, then mouseover can't work.
Here is my sample code:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>

Answer 1

Here's a start. I think it's all pretty self-explanatory. The max-width on the text elements is arbitrary--set it to something that will fit all possible names.
I simplified the markup a bit. You could take it further by making the inner circles pseudo-elements if you like.
* {
box-sizing: border-box;
}
.container {
display: inline-block;
background-color: #ddd;
width: 62px;
padding-left: 10px;
}
.item {
display: inline-flex;
align-items: center;
border-radius: 32px;
padding: 8px;
margin: 16px 0;
cursor: pointer;
border: 1px solid black;
background: white;
font-family: Verdana, Arial, sans-serif;
transition: all .5s;
}
.circle {
width: 24px;
height: 24px;
border-radius: 100%;
background-color: #CD4025;
}
.item:nth-child(2) .circle {
background-color: #0097A7;
}
.item:nth-child(3) .circle {
background-color: #FFAC40;
}
.text {
color: #fff;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.item:hover {
background: #000;
transition: all .5s;
}
.item:hover .text {
max-width: 200px;
margin: 0 16px;
transition: all 1s;
}
<div class="container">
<div class="item">
<div class="circle"></div>
<div class="text">Lilly Martin</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Philip McDaniel</div>
</div>
<div class="item">
<div class="circle"></div>
<div class="text">Tom Bombadil</div>
</div>
</div>

Answer 2

You can do this CSS transitions and altering the scale of the div while the circle item is hovered. Take a look what I did here:
.container {
background-color: lightgray;
width: 60px;
height: 100px;
padding-top: 20px;
padding-left: 20px;
}
.item-container {
position: relative;
overflow: visible;
}
.item {
border-radius: 100%;
padding: 8px;
width: 10px;
height: 10px;
cursor: pointer;
background-color: white;
border: 1px solid black;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
background-color: tomato;
}
.hovered-elem {
position: absolute;
top: 0px;
left: 0px;
width: auto;
height: 100%;
white-space: nowrap;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding-right: 15px;
scale: 0;
transform-origin: left;
transition: all 200ms ease-in-out;
}
.hovered-elem-text-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
padding-left: 40px;
color: white;
}
.item:hover .hovered-elem{
scale: 1;
}
<div class="container">
<div class="item-container">
<div class="item">
<div class="circle"/>
</div>
<div class="hovered-elem">
<div class="hovered-elem-text-container">
Lilly Martin
</div>
</div>
</div>
<div>