HTML - Propriedade "opacity" em imagens

http://amotrix.webs.com/Imagens/Logo.PNG
   Olá caros leitores e leitoras, estamos de volta com mais um tutorial sobre as propriedas HTML, e hoje teremos neste artigo uma maneira fácil e rápida de se fazer a transição de opacidade entre imagens com um leve e fácil código.


   Irei dar uma breve explicação sobre a propriedade opacity, que traduzida a palavra ao Português, quer dizer: opacidade;  Voltando a explicação, a propriedade opacity faz parte do conjuto de propriedades em HTML e JS, cuja ao usar a propriedade não é necessário criar duas ou três imagens, mais somente adicionar a propriedade junta com seus elementos de transição e pronto.


Código:

Efeito Desclareamento


<a href="Link"><img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="Url-da-Imagem" /></a>


Efeito Clareamento

 

<a href="Link"><img onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity: 1;" src="Url-da-Imagem" /></a>


Obs.:

Link = Propriedade equivalente onde você deve modificar para mostrar o direcionamento de página online ou offline donde o usuário clique e vá seguir.

Url-da-Imagem = Equivale ao endereço da imagem.


Em todas as imagens

 Caso você queira adicionar esses efeitos em todos as imagens pertencentes ao blog, criamos um tutorial, caso queira vê-lo, clique aqui



Comentários