Efeito opacidade nas imagens

|

Oi cherries! Tutorial para vocês hoje!

Vocês já devem ter visto em alguns blogs e aqui no cherry bomb, um efeito nas imagens que deixa elas mais opacas ou transparentes, e quando passa o mouse fica normal. Para entender melhor, veja um exemplo:

Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.

Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>

Cole Antes de ]]></b:skin> o código abaixo:

/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}

.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}

Salve as alterações.

Quando quiser deixar uma imagem com esse efeito, é só acrescentar class="opacidade" no código na imagem, vai ficar assim:

<img src="http://i55.tinypic.com/t7nxuf.jpg" class="opacidade"/>

Simples não? Espero que tenham gostado, Kissus.

24 comentários

  1. Eu já conhecia esse tutorial. É bem bacana!
    PlaceFame.blogspot.comBeijos!

    ResponderExcluir
  2. amei o tutorial liah :D

    http://cupcakebomb-js.blogspot.com

    ResponderExcluir
  3. Carolina Wanderley17 de julho de 2011 15:13

    tem como deixar tudo assim ou só é uma imagem?
    www.blogueirasteen.blogspot.com

    ResponderExcluir
  4. Oi meninas :) quero fazer um convite para vocês, eu comecei um blog recentemente e estou promovendo um concurso bem legal, sobre esmaltes, se estiverem interessadas o nome do blog é blogglitz.blogspot.com ;** 
    Adorei o post ;)

    ResponderExcluir
  5. fernandafefetinha17 de julho de 2011 16:23

    Eu fã fanática da Katy (vi que você também é, kkk)

    ResponderExcluir
  6. Sonhacomigoblognovela17 de julho de 2011 17:08

    Aceita parceria?http://teenagestarblog.blogspot.com/

    ResponderExcluir
  7. Tem como por em várias imagens, é só acrescentar o código da opacidade =D

    ResponderExcluir
  8. Misspenelope-teen17 de julho de 2011 17:53

    Amei o tuto, amo esse efeito =D


    Passa lá, misspenelope-teen.blogspot.com

    ResponderExcluir
  9. oi tudo bem? passando para te agradecer O.O "AGRADECER PQ??" seu blog me ajuda muuuuuuuito, sempre q quero fazer alguma modificação no meu corro pra cá e olho os tutoriais (:amo aqui, bjinhos
    http://whatthehellsociedade.blogspot.com

    ResponderExcluir
  10. Nossa eu estou procurando este tutorial a meses *-* Muito obrigada!
    Bjs,
    Gi!

    http://blogdasmeninasblogueiras.blogspot.com/

    ResponderExcluir
  11. Mariliaalveshoffmann18 de julho de 2011 09:50

    Seu blog e um charme vc pode serguir o meu http://gloss17.blogspot.com/ !

    ResponderExcluir
  12. Curiosas Por Cupcake18 de julho de 2011 11:13

    Adorei o tutorial! =D
    Também adorei o blog! O meu ta no começo, vc pode seguir?http://curiosasporcupcake.blogspot.com/

    ResponderExcluir
  13. *O* De nada fofa, fico feliz em ajudar!

    ResponderExcluir
  14. Fofa, meu blog style teens, está no blog vs blog, mas eu deletei ele, tem como tirar=?
    ou então substituir o nome pelo o do meu novo blog, Ser Menina, ams continuar com  meus votos?
    Beijinhos
    http;//sermenina-blog.blogspot.com

    ResponderExcluir
  15. te sigo no twitter, pode seguir?
    @AnaLuhPop e @SerMenina_S2
    Ah, o blog tá lindo!
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  16. me dá um help?
    Olha meu blog:
    http://sermenina-blog.blogspot.com
    percebeu que nele lá no link, ínicio, postagens antigas e tal, está o link me do style teens?

    eu não consigo tirá-lo, ele está ali, mas não está nos meus elementos de páginas!

    como tiro ele dali?

    Beijos
    http://sermenina-blog.blogspot.com

    ResponderExcluir
  17. Eu gosto deste efeito, ele é simpels e útil, eu uso no meu blog j´a algum tempo ;)

    blog.pinkskulldesign.com

    ResponderExcluir
  18. ooi love, amei seu blog e ja estou seguindo!!
    me segue também ??
    beeijos
    www.girlstylish.com

    ResponderExcluir
  19. Daniela Rodrigues19 de julho de 2011 15:36

    Seguindo...
    Amei tudo!
    Segue?
    http://princesas-pink.blogspot.com/
    Bjsss

    ResponderExcluir
  20. O blog de vcs é perfeito!

    ResponderExcluir
  21. Ameei o tutorial Liah! Estou procurando a um tempão!!

    http://by-anaa.blogspot.com/

    ResponderExcluir
  22. To louca pra por eles,nao sei como faz.. me ajuda? :(

    ResponderExcluir
  23. só pega a opacidade se colocar class="opacidade" no código na imagem???

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...