Como colocar um efeito hover nas imagens?

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

Resolvido Como colocar um efeito hover nas imagens?

Mensagem por Jhon Seuam em 10/08/13, 06:33 pm

Qual é minha questão:
Olá, 

Eu gostaria que as imagens presentes no meu fórum,
ficassem todas com um efeito hover ao invés de deslizarem horizontalmente.

Voces podem me ajudar?? Por favor.

Site onde vi esse efeito, http://thevampirediariesbr.forumeiros.com/forum



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

Versão do fórum:
PHPBB3
avatar

Jhon Seuam
Nível 1

Masculino
Inscrito dia : 02/08/2013
Mensagens : 2
Pontos Ativos : 4

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

Resolvido Re: Como colocar um efeito hover nas imagens?

Mensagem por MateusA em 10/08/13, 07:38 pm

Olá!

Qual efeito o senhor deseja especificamente? existe várias coisas que podemos fazer com o efeito hover.
Se eu tiver certo, adicione na tua 'Folha de Estilos CSS'
Código:
img:hover {
transition: 1s;
transition: 2s;
transition: 3s;
transition: 5s;
height: 30px;
}
Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como colocar um efeito hover nas imagens?

Mensagem por Sennior em 12/08/13, 12:21 am

Boa noite,

Vá em teu CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS

Agora sobreponha este código no inicio de teu CSS:
Código:
.img:hover {
width: 450px;
height: 150px;
overflow: hidden;
transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-webkit-transition: all 3s;
-htm-transition: all 3s;
opacity: 0.9;
}
.img {
width: 450px;
height: 50px;
overflow: hidden;
transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-webkit-transition: all 3s;
-htm-transition: all 3s;
opacity: 0.2;
}
É isto?

Até logo.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como colocar um efeito hover nas imagens?

Mensagem por Jhon Seuam em 12/08/13, 08:43 am


Não aconteceu nada com nenhum dos códigos...

Não sei se ficou compreendido, eu queria que a imagem ficasse pequena e escura, quando passamos o mouse em cima ele amplia a imagem e clareia.

E isso que eu quero, vi em um fórum e gostei. Perguntei a algumas pessoas e elas me disseram que é o efeito hover que faz isso.
avatar

Jhon Seuam
Nível 1

Masculino
Inscrito dia : 02/08/2013
Mensagens : 2
Pontos Ativos : 4

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

Resolvido Re: Como colocar um efeito hover nas imagens?

Mensagem por MateusA em 12/08/13, 10:30 am

Olá!

Na verdade, a função e feita com o efeito hover, mais o efeito hover não e nada específico, pode-se variar de acordo com o gosto de cada um.
Não vejo nenhum efeito nas imagens, talvez o fórum deles tenha retirado, ou eu não encontrei.

Até!
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Como colocar um efeito hover nas imagens?

Mensagem por Sennior em 12/08/13, 01:46 pm

Olá amigo,

O senhor colocou o código no inicio de teu CSS? Não coloque o mesmo no final por gentileza, e sim no inicio.

Código:
.img:hover {
width: 450px;
height: 150px;
overflow: hidden;
transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-webkit-transition: all 3s;
-htm-transition: all 3s;
opacity: 0.9;
}
.img {
width: 450px;
height: 50px;
overflow: hidden;
transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-webkit-transition: all 3s;
-htm-transition: all 3s;
opacity: 0.2;
}
Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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