Criação de efeito Hover nos grupos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Criação de efeito Hover nos grupos

Mensagem por Starset em 28/08/18, 11:14 am

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.
avatar

Starset
Nível 9

Masculino
Inscrito dia : 02/03/2017
Mensagens : 164
Pontos Ativos : 230

Ver perfil do usuário http://neworleansoriginals.forumeiros.com/

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Pedxz em 28/08/18, 01:15 pm

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


Aguardo uma resposta,
pedxz.


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário2007 Forumeiros
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1568
Pontos Ativos : 2027

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Starset em 28/08/18, 05:15 pm

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.
avatar

Starset
Nível 9

Masculino
Inscrito dia : 02/03/2017
Mensagens : 164
Pontos Ativos : 230

Ver perfil do usuário http://neworleansoriginals.forumeiros.com/

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Pedxz em 29/08/18, 09:59 am

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;
}


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário2007 Forumeiros
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1568
Pontos Ativos : 2027

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Starset em 29/08/18, 11:25 am

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?
avatar

Starset
Nível 9

Masculino
Inscrito dia : 02/03/2017
Mensagens : 164
Pontos Ativos : 230

Ver perfil do usuário http://neworleansoriginals.forumeiros.com/

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Pedxz em 29/08/18, 11:42 am

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 Louco


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário2007 Forumeiros
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1568
Pontos Ativos : 2027

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Starset em 29/08/18, 01:23 pm

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

Starset
Nível 9

Masculino
Inscrito dia : 02/03/2017
Mensagens : 164
Pontos Ativos : 230

Ver perfil do usuário http://neworleansoriginals.forumeiros.com/

Atendido / Resolvido Re: Criação de efeito Hover nos grupos

Mensagem por Pedxz em 29/08/18, 01:25 pm

Tópico resolvido


Movido para "Questões resolvidas".


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário2007 Forumeiros
avatar

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 1568
Pontos Ativos : 2027

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum