Primeiro tutorial do Blog! :3 |
Neste tutorial irei ensinar como colocar o efeito de opacidade nas imagens, só que ao contrário. É o mesmo efeito de claro-escuro, porém, a foto vai estar normal e quando passar o mouse ela ficará meio embaçada.
Passe o mouse e veja!
A dois jeitos de fazer este efeito. A diferença entre os dois é que: No primeiro você poderá escolher as imagens em que você quer opacidade. Já no segundo não dá pra escolher, ou seja, todas as imagens do blog terão o efeito.
Este é o jeito em que você pode escolher as imagens:
01|Vá até "design" >>"editar html" e procure por ]]>
Logo acima cole:
/** opacidade por facasecanetas **/
.opacidade {
margin: 1px;
border: none;
filter: alpha(opacity=100);
moz-opacity:1.0;
opacity:1.0;
-webkit-transition-duration: .25s;
}
.opacidade:hover {
margin: 1px;
border: none;
filter: alpha(opacity=80);
moz-opacity:.80;
opacity:.80 ;
}
02|Copie o código abaixo e cole na sua postagem:
<img src="LINK_DA_IMAGEM" class="opacidade" height="ALTURA" width="LARGURA" />
Agora vamos aprender do segundo modo:
01|Vá até "design" >>"editar html" e procure por ]]> Logo acima cole:
01|Vá até "design" >>"editar html" e procure por ]]> Logo acima cole:
/** opacidade por facasecanetas **/
img {
margin: 1px;
border: none;
filter: alpha(opacity=100);
moz-opacity:1.0;
opacity:1.0;
-webkit-transition-duration: .25s;
}
img:hover {
margin: 1px;
border: none;
filter: alpha(opacity=80);
moz-opacity:.80;
opacity:.80 ;
}
Bom, é só isso. Espero que tenham gostado do post e que seja útil.
Codificado por mim, crédito (♥)
Olá você ganhou o Game do Blog : Nevando em Nova York... Seu blog vai começar a ser divulgado amanhã Parabéns ... Obrigada..
ResponderExcluirO blog: http://neveemnovayork.blogspot.com.br/
Parabéns... ♥♥
Ai que legal!
ExcluirJá coloquei Beijos
ResponderExcluir