Efeito hover

4 participantes

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

Tópico resolvido Efeito hover

Mensagem por ' Akιo 10.01.14 3:31

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.
Efeito hover UtcSqHz
https://i.imgur.com/UtcSqHz.png
2º- Gostaria que o título da categoria não fosse afetado. Como está agora:
Efeito hover 67kg8KJ
https://i.imgur.com/67kg8KJ.png
3º- Gostaria de efeito (com a cor do fundo em) fade, como o FdF.
Efeito hover PCdmXgo
https://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 18:28, editado 1 vez(es)
' Akιo

' Akιo
***

Membro desde : 13/12/2013
Mensagens : 119
Pontos : 169

http://www.madokamagica.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por :-EraGon-: 10.01.14 3:50

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.
:-EraGon-:

:-EraGon-:
****

Membro desde : 12/12/2013
Mensagens : 226
Pontos : 416

http://suporteparaforuns.forumeiros.com https://www.facebook.com/facebook.com/hilterhp https://twitter.com/@HilterHP

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por pyrohinotama 10.01.14 4:11

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 )
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por ' Akιo 10.01.14 12:54

Mas e quanto ao efeito em fade?
' Akιo

' Akιo
***

Membro desde : 13/12/2013
Mensagens : 119
Pontos : 169

http://www.madokamagica.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por pyrohinotama 10.01.14 13:03

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

até o/
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito hover

Mensagem por Shek 11.01.14 14:43

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por ' Akιo 11.01.14 17:03

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

Eu me refiro ao efeito FADE, ou seja, a cor vai aumentando aos poucos...
' Akιo

' Akιo
***

Membro desde : 13/12/2013
Mensagens : 119
Pontos : 169

http://www.madokamagica.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito hover

Mensagem por Shek 11.01.14 17:23

' 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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por ' Akιo 11.01.14 18:00

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

' Akιo
***

Membro desde : 13/12/2013
Mensagens : 119
Pontos : 169

http://www.madokamagica.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito hover

Mensagem por Shek 11.01.14 18:21

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

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por ' Akιo 11.01.14 18:27

Obrigado.
' Akιo

' Akιo
***

Membro desde : 13/12/2013
Mensagens : 119
Pontos : 169

http://www.madokamagica.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissões neste sub-fórum
Não podes responder a tópicos