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