Your desire is to have the visibility property set to visible when the user hovers over the .sidebar element(s). However, you mistakenly used the display property with a value of none and forgot to update it, preventing it from being shown.
To fix this issue, ensure that you use the same CSS property in both places and set the property value for default and :hover states accordingly.
If you prefer using visibility:
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app {
height: 100vh;
width: 100vw;
}
.sidebar {
width: 100px;
height: 100%;
background-color: #060606;
transition: all 1s;
color: #9ca3af;
display: block;
}
.sidebar span {
visibility: hidden;
}
.sidebar:hover span {
visibility: visible;
}
<div class="app">
<div class="sidebar"><span>123</span></div>
</div>
Alternatively, you can opt for using display:
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app {
height: 100vh;
width: 100vw;
}
.sidebar {
width: 100px;
height: 100%;
background-color: #060606;
transition: all 1s;
color: #9ca3af;
display: block;
}
.sidebar span {
display: none;
}
.sidebar:hover span {
display: initial;
}
<div class="app">
<div class="sidebar"><span>123</span></div>
</div>
You also have other options like using opacity for a smooth transition between hidden and visible states:
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app {
height: 100vh;
width: 100vw;
}
.sidebar {
width: 100px;
height: 100%;
background-color: #060606;
transition: all 1s;
color: #9ca3af;
display: block;
}
.sidebar span {
opacity: 0;
transition: opacity 0.5s ease-in;
}
.sidebar:hover span {
opacity: 1;
}
<div class="app">
<div class="sidebar"><span>123</span></div>
</div>
Moreover, additional properties such as transform can enhance the appearance further. For instance:
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.app {
height: 100vh;
width: 100vw;
}
.sidebar {
width: 100px;
height: 100%;
background-color: #060606;
transition: all 1s;
color: #9ca3af;
display: block;
}
.sidebar span {
display: inline-block;
opacity: 0;
transform: scale(0.4) rotateZ(-75deg);
transition-property: opacity, transform;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
.sidebar:hover span {
opacity: 1;
transform: scale(1) rotateZ(0deg);
}
<div class="app">
<div class="sidebar"><span>123</span></div>
</div>
Further resources: