CSS display a text or label when hover

Question

I am attempting to create a menu that when user hover into it a label or text will appear on the right side, i manage to create a simple effect using below code. but i am lost with how can i make a label appear when hover.

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}

#side-menu:hover {
 width: 400px !important; 
 display:inline-block;
}

My goal is to display a label or text on the right side when hover, any suggestions to achieve this? this so far below is my code. thanks in advance!

  Product Image 

.label-menu{
display:none;
}

user_8858814 · Answer

This should do the trick.

#side-menu {
  background-color: black;
  color: white;
  width: 80px;
  padding: 20px;
  list-style: none;
  transition: ease-in-out all .4s;
  display: table;
}

li {
  width: 50%;
  height: 100%;
  display: table-cell;
}

.side-menu__label {
  float: left;
  width: 100px;
  opacity: 0;
  position: absolute;
  transition: ease-in-out all .4s;
}

#side-menu:hover {
  width: 400px;
}

#side-menu:hover .side-menu__label {
  opacity: 1;
}





  
    
  
  
    Hello World

user_5146495 · Answer

you can show text when the mouse hovers over the icon:

span{
    display:none;
}
#side-menu {
    background-color : black;
    color:white;
    width:80px;
    padding:20px;
    list-style:none;
}

#side-menu:hover {
    width: 400px !important; 
    display:inline-block;
}
#side-menu:hover span{
    display:inline-block;
}




    
        

             
            Product Image

user_1621641 · Answer

You can see code

#side-menu {
background-color : black;
color:white;
width:180px;
padding:20px;
list-style:none;
position: relative;
}

#side-menu:hover {
 display:inline-block;
}


.label-menu,
#side-menu i{
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  margin: 0 5px;
}

#side-menu:hover .label-menu {
  display: inline-block;
}
.label-menu {
  display: none;
}





  Product Image

user_5595389 · Answer

You can add a span to your list item and show it when you hover like this:

#side-menu {
background-color : black;
color:white;
width:150px;
padding:20px;
list-style:none;
}
#side-menu li span.fa {
  display: inline-block;
  margin-right: 10px;
}

#side-menu li span.fa:hover ~ span {
 display:inline-block;
}
#side-menu li span.fa ~ span {
  display: none;
}





        
             your Text here

user_5950470 · Answer

One more way to achieve this is by adding a simple static text in CSS. Eg.

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}
#side-menu:hover {
 width: 400px !important; 
 display:inline-block;
}
#side-menu li:hover:after {
 content: ">> Hovering >>"; /* You can add simple static text in CSS as well. */
    position: inline-block;

}
}

This is the quickest way to add tiny DOM using ::after and ::before pseudo elements.

For more control over the text content you can use normal elements as shown below

#side-menu {
background-color : black;
color:white;
width:80px;
padding:20px;
list-style:none;
}

#side-menu:hover {
 width: 400px !important; 
 display:inline-block;
}
#side-menu li span {
   visibility: hidden;
   display:inline-block;
}
#side-menu li:hover span {
 visibility: visible;

}
}

CSS display a text or label when hover

5 Answers