Overlay auf Glyphicons beim Hover

Question

Hallo, ich habe eine Navbar in meiner Website. seine Anzeige inline. Im Moment besteht die Navbar aus Glyphicons und daneben die "Beschreibung" im Text. (zB "Zurück" oder "Einstellungen") Ich mag nur die Glyphicons und wenn die Maus über 1 ist, sollte eine Überlagerung (ein wenig größer als die Größe des Glyphicons) leicht gefärbt und mit den Worten der Text. Wie kann ich das tun? Ich habe bereits versucht mehr Tutorials online, aber sie haben nicht mit der Inline-Reihenfolge der glyphicons arbeiten ...

#admin_menu .glyphicon         { margin: 0px 10px 0px 0px; font-size: 25px;} 
 
#admin_menu            { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; } 
 
#admin_menu li           { display: inline; margin: 0px 0px 0px 0px; padding: 0px; } 
 
#admin_menu li a          { background-repeat: no-repeat; padding: 0px 15px 0px 0px; }

<ul id="admin_menu"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span> <span> text </span> </a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a></li> 
 
    </ul>

Answer 1

ich so etwas wie dies bekam: https://jsfiddle.net/d04pLr6q/

Dies kann nicht was du erreichen wolltest, nicht sicher;)

#admin_menu .glyphicon{ 
    position: absolute; 
    font-size: 24px; 
    left: 50%; 
    margin-left: -12px; 
    top: 8px; 
    } 
    #admin_menu { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; } 
    #admin_menu li{ 
    display: inline-block; 
    margin: 0px 10px 0px 0px; 
    padding: 0px; 
    } 
    #admin_menu li a { 
    display:block; 
    position: relative; 
    height:40px; 
    width: 60px; 
    padding: 0 10px; 
    font-size:16px; 
    padding-top:12px; 
    text-decoration:none; 
    } 
    #admin_menu .description{ 
     color:transparent; 
     position: absolute; 
     width: 100%; 
     height:100%; 
     top: 0; 
     left:0; 
     text-align: center; 
     line-height: 40px; 
     display: block; 
     transition: all 0.3s; 
    } 
    #admin_menu li a:hover .description{ 
     color: white; 
     background-color: rgba(51, 122, 183, 0.75); 
    } 

Answer 2

ich denke das ist sowas wie was du bist fter:

* { 
 
    box-sizing: border-box; 
 
} 
 
#admin_menu .glyphicon { 
 
    font-size: 25px; 
 
    padding: 0 15px 
 
} 
 
#admin_menu { 
 
    text-align: center; 
 
    list-style-type: none; 
 
    margin: 30px; 
 
    padding: 0px; 
 
} 
 
#admin_menu li { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
#admin_menu li a { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
#admin_menu li a span:nth-child(2) { 
 
    font-weight: bold; 
 
    position: absolute; 
 
    color: red; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    opacity: 0; 
 
    transition: opacity .35s ease; 
 
} 
 
#admin_menu li a:hover .glyphicon { 
 
    opacity: 0.2; 
 
    transition: opacity .35s ease; 
 
} 
 
#admin_menu li a:hover span:nth-child(2) { 
 
    opacity: 1 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul id="admin_menu"> 
 
    <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span> <span> text </span> </a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a> 
 
    </li> 
 
    <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a> 
 
    </li> 
 
</ul>