Efeito hover

3 participantes

Ir para baixo

Tópico resolvido Efeito hover

Mensagem por StafferGroupBR™ 04.02.13 18:24

Qual é minha questão:
Olá, eu gostaria de saber como posso aplicar hover em uma imagem específica!

Quero que quando passe o mouse sobre ela, ela tenha opacidade de .5

Endereço do meu fórum:
http://staffergroupbr.stuning.net

Versão do fórum:
PHPBB3
StafferGroupBR™
StafferGroupBR™
***

Membro desde : 06/10/2012
Mensagens : 110
Pontos : 176

http://staffergroupbr.stuning.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por Firenando 04.02.13 18:46

Seu fórum aceita HTML?
Firenando
Firenando
Super Membro

Membro desde : 22/10/2011
Mensagens : 1665
Pontos : 2318

http://divineartz.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por StafferGroupBR™ 04.02.13 18:59

é em um WidGet.

Sim aceita HTML.
StafferGroupBR™
StafferGroupBR™
***

Membro desde : 06/10/2012
Mensagens : 110
Pontos : 176

http://staffergroupbr.stuning.net/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por Roevs 04.02.13 19:13

Olá,

Veja o conteúdo do Quote

Olá a todos, vim fazer mais um tutorial de opacidade.

Bom, nesse tutorial vamos aprender a fazer um efeito com HTML ao passar o mouse em cima da imagem.

Bom, aqui está o código.

Código:
<img title="Descrição" src="LinkDaImagem" style="opacity: 0.5;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.5;" />

Bom, vou explicar o código.

O style="opacity:0.5;" seria o efeito, quando a pagina estiver carregada, para ficar com 0.5, se deixar sem isso, ele carrega sem opacidade, mais depois que passar o mouse, ela fica com o efeito normal, então é melhor deixar como está.

onmouseover="this.style.opacity=1;" seria quando ele passar o mouse em cima da imagem, que irá ficar com 1 de opacidade, ou seja, totalmente nítida.

onmouseout="this.style.opacity=0.5;" seria quando não estiver com o mouse em cima da imagem, que irá ficar com 0.5 de opacidade.

Aqui está um como exemplo.

Código:
<img title="Firenando" src="http://upamais.com/images/72160684001332132291.png" style="opacity: 0.5;" onmouseover="this.style.opacity=1;" onmouseout="this.style.opacity=0.5;" />

Antes
Efeito hover 21267533956671487020

Depois
Efeito hover 72160684001332132291

Créditos: Firenando.
OBS: Podem copiar este tutorial e colocar em outro fórum, mais deixe os créditos e o link do fórum.

Até
Roevs
Roevs
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover

Mensagem por StafferGroupBR™ 04.02.13 19:29

Obrigado, Pode fechar!
StafferGroupBR™
StafferGroupBR™
***

Membro desde : 06/10/2012
Mensagens : 110
Pontos : 176

http://staffergroupbr.stuning.net/forum

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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