Efeito hover nas categorias

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

Resolvido Efeito hover nas categorias

Mensagem por PrisoN†BreaK em 03/03/17, 02:18 pm

Detalhes da questão


Endereço do fórum: http://lscwsamp.forumeiros.com/
Versão do fórum: PunBB

Descrição


Gostaria desse efeito na categoria

http://imgur.com/a/f09HQ

Quando você passa o mouse em cima da categoria ele, fica com a cor toda, e quando o mouse não tá, ele só fica com a cor na ponta esquerda.

Fórum onde vi: http://www.brasilplaystart.com.br/forum/ .
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito hover nas categorias

Mensagem por Shek em 05/03/17, 11:43 am

Boa tarde.

Acesse Visualização >> Cores >> Folha de estilos CSS e personalize este código:
.forum-category .title {
background: #1a1a1a url("IMAGE") repeat 0%;
transition: all .5s ease-in-out;
}

.forum-category .title:hover {
box-shadow: 500px 0px 0px HEXADECIMAL inset;
transition: all .5s ease-in-out;
}
Troque o valor em Vermelho pela URL da imagem padrão, que no caso daquele fórum é uma imagem em degradê começando por um verde indo até o preto. Em seguida, troque o Laranja pelo Hexadecimal da cor da imagem escolhida.

Até mais.


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17156
Pontos Ativos : 21415

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK em 05/03/17, 01:17 pm

Resultou, teria como coloca este efeito nas estáticas tbm?
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK em 07/03/17, 10:04 am

avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda em 07/03/17, 10:16 am

Tente trocar por:

Código:
.forum-category .title,
.content-block .title {
  background: #1a1a1a url("IMAGE") repeat 0%;
  transition: all .5s ease-in-out;
}

.forum-category .title:hover,
.content-block .title:hover {
  box-shadow: 500px 0px 0px HEXADECIMAL inset;
  transition: all .5s ease-in-out;
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK em 07/03/17, 12:25 pm

Resultou, agora só uma dúvida, tem como fazer em fez de por a imagem, coloca uma cor, para que quando eu mudasse a cor do fórum pelo seletor de cor, ele mudasse automaticamente também?
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

Ver perfil do usuário http://brasilplayfreedomofc.forumeiros.com/forum
  • 0

Resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda em 09/03/17, 10:40 am

Troque o CSS por esse:

Código:
.title, .title > * {
    position: relative;
    overflow: hidden;
}

.title:before {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(45deg, rgba(136,191,232,0) 0%, #222 40%, #222 100%);
    transition: .5s ease-out transform;
}

.title:hover:before {
    transform: translate(100%);
}
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK em 09/03/17, 05:43 pm

Ótimo, resolvido <3
avatar

PrisoN†BreaK
Membro do Fórum

Masculino
Inscrito dia : 23/10/2015
Mensagens : 1236
Pontos Ativos : 1740

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

Resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda em 10/03/17, 12:09 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

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

- Tópicos similares

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