Efeito hover

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

Resolvido Efeito hover

Mensagem por ' Akιo em 10/01/14, 01:31 am

Qual é minha questão:
Olá!
Gostaria de consertar e adicionar mais efeitos à esse código:
.icon:hover { border-radius: 3px;margin-left: -0px;border-left: 3px solid orange;border-right: 4px solid orange; }

1º- Quando passo o mouse, o texto e imagem são 'encurtados' um pouco. Gostaria que eles permanecessem fixos.

http://i.imgur.com/UtcSqHz.png
2º- Gostaria que o título da categoria não fosse afetado. Como está agora:

http://i.imgur.com/67kg8KJ.png
3º- Gostaria de efeito (com a cor do fundo em) fade, como o FdF.

http://i.imgur.com/PCdmXgo.png

Obrigado!

Endereço do meu fórum:
http://www.madokamagica.forumeiros.com

Versão do fórum:
PHPBB3


Última edição por ' Akιo em 11/01/14, 04:28 pm, editado 1 vez(es)
avatar

' Akιo
Nível 8

Masculino
Inscrito dia : 13/12/2013
Mensagens : 119
Pontos Ativos : 169

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

Resolvido Re: Efeito hover

Mensagem por :-EraGon-: em 10/01/14, 01:50 am

Olá, bem não entendi muito bem sua questão mas, para que o titulo da categoria não seja afetado, aceda à:

Visualização -> Imagens e Cores -> Cores -> Os Contornos -> Cor de fundo categoria.
avatar

:-EraGon-:
Nível 9

Masculino
Inscrito dia : 12/12/2013
Mensagens : 224
Pontos Ativos : 414

Ver perfil do usuário http://suporteparaforuns.forumeiros.com https://www.facebook.com/facebook.com/hilterhp https://twitter.com/@HilterHP

Resolvido Re: Efeito hover

Mensagem por pyrohinotama em 10/01/14, 02:11 am

Ola Akio, me desculpe mais o código de efeito hover que você usa não apresenta nenhum erro.
O efeito usado "aumenta" as bordas laterais, quando elas aumentam de grossura a largura das areas destacadas em sua duvida acaba diminuindo para não ultrapassar os limites de largura das categorias e fóruns.
Caso ainda deseje algum efeito hover sugiro que busque por outro que não afete o mesmo, até o/

(quanto as demais duvidas: infelizmente as regras apenas permitem que sejam respondidas um duvida por tópico )
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito hover

Mensagem por ' Akιo em 10/01/14, 10:54 am

Mas e quanto ao efeito em fade?
avatar

' Akιo
Nível 8

Masculino
Inscrito dia : 13/12/2013
Mensagens : 119
Pontos Ativos : 169

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

Resolvido Re: Efeito hover

Mensagem por pyrohinotama em 10/01/14, 11:03 am

@pyrohinotama escreveu:(quanto as demais duvidas: infelizmente as regras apenas permitem que sejam respondidas um duvida por tópico )

até o/
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito hover

Mensagem por Shek em 11/01/14, 12:43 pm

Bom dia!

Em seu CSS, procure por:
Código:
.icon:hover
E substitua por esse código CSS:
Código:
.icon:hover {
background-color: #E5F1F9 !important;
border-left: 3px solid orange;
border-radius: 3px;
border-right: 4px solid orange;
margin-left: -0;
}
Atenciosamente,
Shek


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

Mensagem por ' Akιo em 11/01/14, 03:03 pm

Vocês não ajudaram em nada até agora...

Eu me refiro ao efeito FADE, ou seja, a cor vai aumentando aos poucos...
avatar

' Akιo
Nível 8

Masculino
Inscrito dia : 13/12/2013
Mensagens : 119
Pontos Ativos : 169

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

Resolvido Re: Efeito hover

Mensagem por Shek em 11/01/14, 03:23 pm

@' Akιo escreveu:Vocês não ajudaram em nada até agora...

Eu me refiro ao efeito FADE, ou seja, a cor vai aumentando aos poucos...
Senhor Akio, tenha muita calma e paciência ! Bomba Você tem de ter em mente que se você não explica que deseja o efeito com transição à tempo, os códigos informados nunca vão funcionar. Da próxima vez, vamos punir seu tópico pela sua não cordialidade. Positivo 

Sobre sua questão, use este código:
Código:
.icon:hover {
transition-duration: 1s;
-webkit-transition-duration: 1s;
border-left: 3px solid orange;
border-radius: 3px;
border-right: 4px solid orange;
margin-left: -0;
}
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

Mensagem por ' Akιo em 11/01/14, 04:00 pm

Aconteceu o efeito de transição com as barras.. Mas disse que queria com a cor do fundo, como no FdF.
avatar

' Akιo
Nível 8

Masculino
Inscrito dia : 13/12/2013
Mensagens : 119
Pontos Ativos : 169

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

Resolvido Re: Efeito hover

Mensagem por Shek em 11/01/14, 04:21 pm

Olá!

Tente com esse código:
Código:
li.row {
background-image: url(http://i.imgur.com/m1bJdLu.png);
background-position: right;
background-color: #E5F1F9 !important;
}

li.row:hover {
transition-duration: 1s;
-webkit-transition-duration: 1s;
background-color: #C6E0F2;
}


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

Mensagem por ' Akιo em 11/01/14, 04:27 pm

Obrigado.
avatar

' Akιo
Nível 8

Masculino
Inscrito dia : 13/12/2013
Mensagens : 119
Pontos Ativos : 169

Ver perfil do usuário http://www.madokamagica.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