Tutorial - Efeito Opacity

Oi meus amores,aqui é a Laura :3
Hoje vou ensinar como fazer efeito opacity nas imagens do seu blog.


Clique em leia mais e aprenda (:
Nível de Dificuldade: Médio



Aqui vou ensinar duas maneiras do efeito opacity.
1a maneira = Sua imagem já está com o efeito e ao passar o mouse ela volta ao normal.
2a maneira = Sua imagem está normal e ao passar o mouse ela fica com efeito opacity.


1a Maneira

1- Vá em Modelo -> Editar HTML -> E procure por:

]]></b:skin>

2- Acima,cole esse código:

.main img {
filter:alpha(opacity=80);

-moz-opacity:0.80;
opacity:0.80;
}
.main img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
duration: 50s;

} 

3- Agora vou explicar como personalizar o código.

A primeira coluna é a imagem normal,e a segunda é como ela fica com o mouse por cima.
Como essa é a 1a maneira,nós queremos personalizar a imagem normal,
então vamos personalizar somente a primeira coluna.

Onde está escrito 80 e 0.80 você pode personalizar.
Quanto menor o número,mais efeito opacity fica a sua imagem(normal).
Se mudar o 80 para 70 ,terá que mudar o 0.80 para 0.70. E vice-e-versa.

4- Após já tiver personalizado,clique em salvar e pronto !


2a Maneira

1- Vá em Modelo -> Editar HTML -> E procure por:

]]></b:skin>

2- Acima,cole esse código:

.main img {

filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.main img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
duration: 50s;
} 

3- Agora vou explicar como personalizar o código. 

A primeira coluna é a imagem normal,e a segunda é como ela fica com o mouse por cima.
Como essa é a 2a maneira,nós queremos personalizar a imagem com o mouse por cima,
então vamos personalizar somente a segunda coluna.

Onde está escrito 80 e 0.80 você pode personalizar.
Quanto menor o número,mais efeito opacity fica a sua imagem(com o mouse por cima).
Se mudar o 80 para 70 ,terá que mudar o 0.80 para 0.70. E vice-e-versa.

4- Após já tiver personalizado,clique em salvar e pronto !

Gostaram do tutorial? 
Eu aprendi a primeira maneira no Encantos de Uma Adolescente.
Comentem ! Beijos e tchau tchau :3

4 bombons de chocolatii comentaram :3:

  1. oie adorei a post muito legal mesmo s2 adorei também o blog seguindo já se puder visita meu blog se gostar segui ? www.menina-incrivel.blogspot.com

    ResponderExcluir
  2. No meu nao aconteceu Nada '-'


    http://foryoyou.blogspot.com.br/

    ResponderExcluir
  3. Adoreiii eu olhei uns 10000000 sites e nenhum tava certo,amei o blog,estou seguindo ;)

    ResponderExcluir