Criação de efeito Hover nos grupos

Detalhes da questão

Endereço do fórum: http://legaciesrpg.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Pessoal, estou querendo criar um efeito hover nos meus grupos. Hoje eles são feitos por RPG Awesome icons, como podem ver aqui:

https://prnt.sc/knun71

Porém quero ao passar o mouse sobre eles, o hover seja ativado fazendo o background ficar na corpo do em questão e no lugar da icon apareça o nome do grupo.

Sei que deverei ter que fazer o css de cada hover separado, bem como os nomes dos grupos também, isso não é um problema. O grande problema está na construção do código hover, já que o máximo que consigo fazer é um greyscale.

Se precisarem de algum código para me ajudarem, basta pedir.

Olá @Starset,
Vou necessitar do template onde os grupos estão expostos


Aguardo uma resposta,
pedxz.

Aqui está o meu index_body ::

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->

 <!-- BEGIN switch_viewonline_link -->
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->

 <!-- END switch_viewonline_nolink -->

<table>
  <tr>
    <td>
      <div class="g1"><a href="/g1=Administradores"><i class="ra ra-book"></i></a></div></td>
    <td><div class="g2"><a href="/g1=staff"><i class="ra ra-triforce"></i></a></div></td>
    <td><div class="g3"><a href="/g1=staff"><i class="ra ra-batwings"></i></a></div></td>
    <td><div class="g4"><a href="/g1=staff"><i class="ra ra-ankh"></i></a></div></td>
    <td><div class="g5"><a href="/g1=staff"><i class="ra ra-wolf-howl"></i></a></div></td>
    <td><div class="g6"><a href="/g1=staff"><i class="ra ra-moon-sun"></i></a></div></td>
    <td><div class="g7"><a href="/g1=staff"><i class="ra ra-circle-of-circles"></i></a></div></td>
    <td><div class="g8"><a href="/g1=staff"><i class="ra ra-player"></i></a></div></td>
    <td><div class="boxnovs"><div class="novato">{NEWEST_USER}</div>
      <div class="recordes">{TOTAL_POSTS}</div>
      <div class="creditos">Skin desenvolvida por <a href="https://is.gd/StarsetWR">Starset @ Wonderlande Resources</a>, bem como seus gráficos e sistemas. Plágio é crime!</div>
      </div></td></tr></table>
<div class="onlineall">
<table>
  <tr>
    <td><div class="onlinenow">{LOGGED_IN_USER_LIST}</div></td>
  <td><div class="onlineago">{L_CONNECTED_MEMBERS}
    <div class="recordeuser">{RECORD_USERS}</div></div></td></tr></table></div>
 <!-- BEGIN switch_chatbox_activate -->
 <!-- BEGIN switch_chatbox_popup -->
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />

                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->

<br style="clear:both" />

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}


Só preciso de um modelo, que sigo para os outros, caso precise do CSS só pedir.

EDIT: 28.08.2018 - 18:20:12

Acabei de ver um fórum que tem um hover nos grupos bem próximo do que eu gostaria, aqui o link dele: http://thecallfrombeyond.foroactivo.com/

Se for possível nesse estilo, eu ficaria grato.

Mude o seu template para:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
<br class="clear" />
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 
                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->
 
 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<!-- END message_admin_index -->
 
{CHATBOX_TOP}
{BOARD_INDEX}
 
<!-- BEGIN disable_viewonline -->
 
 <!-- BEGIN switch_viewonline_link -->
 <!-- END switch_viewonline_link -->
 
 <!-- BEGIN switch_viewonline_nolink -->
 
 <!-- END switch_viewonline_nolink -->

<table>
  <tr>
      <td class="group-details">
        <div class="g1"><a href="/g1=Administradores"><i class="ra ra-book"></i></a><span>G1</span></div>
      </td>
      <td class="group-details">
        <div class="g2"><a href="/g1=staff"><i class="ra ra-triforce"></i></a><span>G2</span></div>
      </td>
      <td class="group-details">
        <div class="g3"><a href="/g1=staff"><i class="ra ra-batwings"></i></a><span>G3</span></div>
      </td>
      <td class="group-details">
        <div class="g4"><a href="/g1=staff"><i class="ra ra-ankh"></i></a><span>G4</span></div>
      </td>
      <td class="group-details">
        <div class="g5"><a href="/g1=staff"><i class="ra ra-wolf-howl"></i></a><span>G5</span></div>
      </td>
      <td class="group-details">
        <div class="g6"><a href="/g1=staff"><i class="ra ra-moon-sun"></i></a><span>G6</span></div>
      </td>
      <td class="group-details">
        <div class="g7"><a href="/g1=staff"><i class="ra ra-circle-of-circles"></i></a><span>G7</span></div>
      </td>
      <td class="group-details">
        <div class="g8"><a href="/g1=staff"><i class="ra ra-player"></i></a><span>G8</span></div>
      </td>
      <td>
        <div class="boxnovs">
            <div class="novato">{NEWEST_USER}</div>
            <div class="recordes">{TOTAL_POSTS}</div>
            <div class="creditos">Skin desenvolvida por <a href="https://is.gd/StarsetWR">Starset @ Wonderlande Resources</a>, bem como seus gráficos e sistemas. Plágio é crime!</div>
        </div>
      </td>
  </tr>
</table>
<div class="onlineall">
<table>
  <tr>
    <td><div class="onlinenow">{LOGGED_IN_USER_LIST}</div></td>
  <td><div class="onlineago">{L_CONNECTED_MEMBERS}
    <div class="recordeuser">{RECORD_USERS}</div></div></td></tr></table></div>
 <!-- BEGIN switch_chatbox_activate -->
 <!-- BEGIN switch_chatbox_popup -->
 <!-- END switch_chatbox_popup -->
 <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
 <div class="inner"><span class="corners-top"><span></span></span>
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
 <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
 <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 
                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
 </div>
 </form>
 <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
 
<br style="clear:both" />
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
 
{AUTO_DST}

E adicione na sua folha de estilo o seguinte código:

Código:

.group-details div span {
    display: none;
}
.group-details div:hover span {
    display: block;
}

Oi, Pedxz!

Acabei de incluir no meu forum o seu código, até que fuincinou o hover, porém não fico bem como eu tava pensando.

Com esse hover, o nome do grupo aparece abaixo do grupo em questão, como pode ver no print:



Eu preciso que o nome apareça no centro do quadrado, onde hoje está o RPG Awesome icon, no caso desse primeiro grupo por exemplo:

Com o mouse sobre o grupo, o quadrado ficaria todo preto e o G1 ficaria ao centro.

É possível fazer isso?

Desculpe o improvisto, não tinha contado com o ícone mude o código passado em cima (CSS) para:

Código:

.group-details div span,
.group-details div:hover i {
    display: none;
}
.group-details div:hover span {
    display: block;
    line-height: 74px;
    text-align: center;
}

Eu mudava um promenor do seu código, o href está no ícone com o efeito :hover, o link "deixa" de existir, logo recomendava a mudança do sitio do link para entre os <span> do texto

Amigo, super resolvido, pode fechar o tópico!