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:
Mas para adicionar o efeito, adicionaremos a classe, como mostrado abaixo:
Esse tutorial, pode ser usado para qualquer plataforma que siga as regras de CSS, como o Wordpress.
