24 de ago. de 2012

Opacidade na imagem quando passa o mouse

Oi pessoal! Eu expliquei aqui como colocar opacidade nas imagens do blog, para depois que passar o mouse, ela volta ao normal. Hoje vou ensinar a vocês a colocarem o efeito da opacidade depois que passa o mouse. Vamos lá:
Veja um preview aqui.

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:


\*Posts
--------------------
2- ABAIXO disso, cole:

 .post img {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
.post img:hover {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
3- Visualize, se estiver tudo certo, salve.

Para usar esse efeito em apenas algumas imagens, use o seguinte código:

.opacidade1 {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
.opacidade1:hover {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
Depois coloque onde você quiser:

<div class="opacidade1">
<a href="LINK"><img src="LINK DA IMAGEM" / title="TÍTULO"></a></div>

Se não quiser link, é só retirar a parte:  <a href="LINK>

2 comentários:

  1. Oi Marina!
    Vou passar bastante tempo por aqui.
    Adorei as dicas.

    Bjos!!
    Cida
    Moonlight Books

    ResponderExcluir
  2. Primeira pergunta:

    Como faço para meus comentários aparecerem assim?


    Bjos!!
    Cida
    Moonlight Books

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!