terça-feira, 17 de maio de 2011

Como deixar as imagens opacas no blog



Este post trata de como alterar a opacidade (transparência) das imagens adicionando efeitos CSS no blog.

Clique no link abaixo e veja o efeito que esta imagem adquire ao se passar o cursor sobre ela:



Para adicionar este efeito em seu blog, vá em Design > Editar Html > pressione Ctrl + F. Agora procure por ]]> < b:skin>e logo acima adcione os códigos de estilo a seguir:


.hovereffect img {
opacity:0.5;
filter:alpha(opacity=50);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.hovereffect:hover img {
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}


Salve.


Perceba que a quantidade de opacidade "0.5" e "1.0" pode ser alterada.


Para utilizar este efeito, teremos que adicionar class="hovereffect" em nossas imagens. Por exemplo, ao adicionar uma imagem, ao clicarmos em Editar HTML ela ficará mais ou menos assim:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjqNq4a2i6zesxyoLlWs39SmEgIK3Wrj6_FmH1NDB7bCg6T2Sbz2tU0uby0T6Th_LyymoUKDZ9q9Fbr1dvj9ZvL9JgOJgEuObI0-mUFNtpzIY5gKgNUMe94mf-myvh6VDXov3iAM4-w/s1600/foto-artistica.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjqNq4a2i6zesxyoLlWs39SmEgIK3Wrj6_FmH1NDB7bCg6T2Sbz2tU0uby0T6Th_LyymoUKDZ9q9Fbr1dvj9ZvL9JgOJgEuObI0-mUFNtpzIY5gKgNUMe94mf-myvh6VDXov3iAM4-w/s320/foto-artistica.jpg" width="320" /></a>



Mas para adicionar o efeito, adicionaremos a classe, como mostrado abaixo:

<a class="hovereffect" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjqNq4a2i6zesxyoLlWs39SmEgIK3Wrj6_FmH1NDB7bCg6T2Sbz2tU0uby0T6Th_LyymoUKDZ9q9Fbr1dvj9ZvL9JgOJgEuObI0-mUFNtpzIY5gKgNUMe94mf-myvh6VDXov3iAM4-w/s1600/foto-artistica.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjqNq4a2i6zesxyoLlWs39SmEgIK3Wrj6_FmH1NDB7bCg6T2Sbz2tU0uby0T6Th_LyymoUKDZ9q9Fbr1dvj9ZvL9JgOJgEuObI0-mUFNtpzIY5gKgNUMe94mf-myvh6VDXov3iAM4-w/s320/foto-artistica.jpg" width="320" /></a>


Esse tutorial, pode ser usado para qualquer plataforma que siga as regras de CSS, como o Wordpress.

0 comentários:

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...