Procurar
Entrar
Últimos assuntos
Os membros mais ativos da semana
Nenhum usuário |
Os membros mais ativos do mês
Nenhum usuário |
[HTML] Opacidade na imagem com mouse em cima
Página 1 de 1
[HTML] Opacidade na imagem com mouse em cima
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.
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.
Antes
Depois
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.
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
Depois
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.
- Pontos : 0
Data de inscrição : 01/01/1970
Tópicos semelhantes
» Mega Tutorial - JS, HTML, CSS e linguagens Extras
» Imagem de "buraco negro" é capturada por cientistas
» Instituto divulga a maior imagem já feita do Universo
» Imagem de "buraco negro" é capturada por cientistas
» Instituto divulga a maior imagem já feita do Universo
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Ter Jan 08, 2013 5:32 pm por Dener
» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener
» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener
» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener
» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener
» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.
» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener
» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener
» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por