Descrição dos grupos

• Descrição:

Olá,

Como posso fazer este efeito em meu fórum? http://prntscr.com/3hg8ob.

Até mais.

• Informações:

Código:

<style type="text/css">
.members-group .forumbg-table th{
    text-align:left;
}
.members-group .forumbg{
    padding:5px;
    border-radius:5px;
}
.members-group img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 70px;
}
.members-group tr > td:nth-child(1){
    font-weight: bold;
}
</style>
<div class="members-group">
    <div class="forumbg forumbg-table">
        <table class="table1" colspacing="2">
            <thead><tr><th colspan="8">Grupos do fórum</th></tr></thead>
            <tbody>
            <tr class="row3"><td colspan="2">Administrador</td></tr>

            <tr class="row1">
                <td>Rank</td>
                <td><img src="http://s5.postimg.org/pxoz9yacj/001.gif"></td>
            </tr>

            <tr class="row1">
                <td>Função</td>
                <td>Administrar o fórum</td>
            </tr>
                
            <tr class="row3"><td colspan="2">Membros do grupo</td></tr>

            <tr class="row1">
                <td class="mp"><a href="/privmsg?mode=post&u=1"><img src="http://2img.net/i/fa/prosilver/icon_contact_pm.png" alt="Enviar uma mensagem privada" title="Enviar uma mensagem privada"></a></td>
                <td><a href="/u1"><span style="color:#BF3131"><strong>Admin</strong></span></a></td>
            </tr>

            </tbody>
        </table>
    </div>
</div>

Código:

max-height: 70px;

Código:

.leyenda_css a[href^="/g"],
a[href^="/u"] span[style^="color"] strong {
  position: relative
}

.leyenda_css a[href^="/g"]:hover:before,
a[href^="/u"] span[style^="color"] strong:hover:before {
  bottom: 17px;
  left: 15px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-width: 7px;
  margin-left: -7px;
}

.leyenda_css a[href^="/g"]:hover:after,
a[href^="/u"] span[style^="color"] strong:hover:after {
  background-color: rgba(0,0,0,0.5);
  border-radius: 3px;
  bottom: 30px;
  color: #fff;
  display: block;
  padding: 3px 10px;
  font-style: normal;
  font-weight: 700;
  left: -15px;
  text-align: center;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  font-size: 10px;
  line-height: 1.5em;
}

#onlinelist {
  overflow: visible;   
}

Código:

.leyenda_css a[href^="/g2-"]:hover:after,
a[href^="/u"] span[style*="#AA00FF"] strong:hover:after {
  content: "Descrição do Administradores."
}

Código:

#onlinelist {
  overflow: visible; 
}