8 de out de 2012

Efeito preto e branco nas imagens


Hoiii pessoal!
Hoje vou ensinar um efeito que aprendi no Vodca e Coca. É o efeito das imagens em preto e branco quando passa o mouse.




Aplicando o efeito na elite de afiliados:

Vá no HTML do seu blog, aperte CTRL+F e procure por:

]]></b:skin>

Acima disso, cole:


.pretoebranco {
border: 1px solid #eeeeee;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
-webkit-transition-duration: .40s;
}
.pretoebranco:hover {
opacity: 1.0;
border: 1px solid #666666;
-webkit-filter: saturate(0%) ;
}

Quando quiser usar o efeito, use o código:

<a href="LINK DO BLOG" title=' TITULO AO PASSAR O MOUSE '><img src="LINK DA IMAGEM" class="pretoebranco" /></a>
Aplicando o efeito a todas as imagens do blog:

Acima de ]]></b:skin>, cole:

.post img {
border: 1px solid #eeeeee;
opacity: 0.6;
-webkit-transition: 0.5s;
text-align: center;
-webkit-transition-duration: .40s;
}
.post img:hover {
opacity: 1.0;
border: 1px solid #666666;
-webkit-filter: saturate(0%) ;
}

Nenhum comentário:

Postar um comentário

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!