HTML: Adicione transparência em imagem, efeito hover

Nesse tutorial vou ensinar a fazer um efeito hover transparente em imagens do blogger. Confira como ficará seu efeito em imagens:

Então vamos á aplicação do código principal, eu recomendo que esse processo seja feito por quem tem experiência com HTML, pois não queremos que nada dê errado no seu blog não é?...

Vá em Modelo >> Editar HTML >> Proseguir;
Procure então pelo trecho: </head> cole o código a seguir ACIMA dele este código:

<style type='text/css'>

a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}

a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>

Feito isso salve o seu modelo.
Para que a imagem disponha do efeito, use o seguinte código para colocar imagens no blog:

 <a class="linkopacity" href=

"http://empreendedoresblogger.blogspot.com/#!" 

imageanchor="1" style="clear: left; float: left; margin-bottom: 1em;

 margin-right: 

1em;"><img border="0" height="100" 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYhyhUf99mLd3rcYD093J2ij2wJBRrCFBQ_sZbLKiJlqkp2MuwZWsD_n6ot5Rg0VTPacpRF3kyX8mPc4Ybzc5XIWsQh5Nnt9h5X8Yy9_Yg9lvVj9Q1VDdqIXplvEgFjFknZvRRmuOUBbo/s200/cover.png" 

width="100" /></a>