Efeito opacidade nas imagens
Oi cherries! Tutorial para vocês hoje!
Vocês já devem ter visto em alguns blogs e aqui no cherry bomb, um efeito nas imagens que deixa elas mais opacas ou transparentes, e quando passa o mouse fica normal. Para entender melhor, veja um exemplo:
Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.
Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>
Cole Antes de ]]></b:skin> o código abaixo:
Quando quiser deixar uma imagem com esse efeito, é só acrescentarclass="opacidade" no código na imagem, vai ficar assim:
<img src="http://i55.tinypic.com/t7nxuf.jpg" class="opacidade"/>
Simples não? Espero que tenham gostado, Kissus.
Vocês já devem ter visto em alguns blogs e aqui no cherry bomb, um efeito nas imagens que deixa elas mais opacas ou transparentes, e quando passa o mouse fica normal. Para entender melhor, veja um exemplo:
Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>
Cole Antes de ]]></b:skin> o código abaixo:
/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}
.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}
Salve as alterações..opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}
.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}
Quando quiser deixar uma imagem com esse efeito, é só acrescentarclass="opacidade" no código na imagem, vai ficar assim:
<img src="http://i55.tinypic.com/t7nxuf.jpg" class="opacidade"/>
Simples não? Espero que tenham gostado, Kissus.
Nenhum comentário:
Postar um comentário