Opacidade em imagens apenas com CSS

Autor: 2 de jan. de 2009 -
Olá, mais um mini tutorial apos anos de inatividade, sabe como é né??

ferias...

Bom vamos lá,não sei se alguem percebeu... as imagens dos nossos parceiros estão meio transparentes,eu anteriormente ensinei como fazer isso usando java script,bem hoje voces vao aprenders apenas com css.

vou criar uma div

e vou dar a ela uma class



exemplo

<div class="imagens">

</div>


Qualquer elemento que fique dentro desta div vai ter que seguir os comandos que sejam enviados pelo css da div.



em sua folha de estilo voce vai adicionar o seguinte CSS



.imagens img{opacity: .4;  filter:alpha(opacity=40);  -moz-opacity: 0.4;  -khtml-opacity: 0.4;background:#000;}
 
.imagens img:hover{opacity:9.0;  filter:alpha(opacity=900);  -moz-opacity: 9.0;  -khtml-opacity: 9.0;}


a resultado será que qualquer imagem que voce coloque dentro da div com o a class 'imagens' vai ter o efeito.


Vejam como ficou:











Bom.. se alguem tem alguma duvida... comente

=D

3 comentários:

  1. Tom Rodrigues1 de junho de 2009 às 20:15

    Brother gostaria de fazer isso nos botoes desse elemento do meu blog http://i39.tinypic.com/3451nr7.gif

    Não consegui entender como faz, vc pode me ajudar?

    http://b4dtom.blogspot.com/

    ResponderExcluir
  2. Tom Rodrigues1 de junho de 2009 às 20:52

    aê brother eu consegui pelo teu codigo fonte, valew.

    ResponderExcluir
  3. SenhorDoFogo3 de julho de 2009 às 15:11

    Se alguem quiser deixar mais visivel, em vez de por:
    .imagens img{opacity: .4; filter:alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4;background:#000;}

    Poem:
    .imagens img{opacity: .7; filter:alpha(opacity=40); -moz-opacity: 0.7; -khtml-opacity: 0.7;background:#000;}

    ResponderExcluir

Assinar: Postar comentários (Atom)