Borda e opacidade nas imagens

|
Eu já ensinei aqui como colocar o efeito de opacidade nas imagens do blog, mas hoje vou passar um código que além de diminuir a opacidade, aplica uma borda em volta na imagem. Veja o exemplo:

Para colocar esse efeito, é só ir no HTML do seu blog, apertar Ctrl+F e procurar por ]]></b:skin>
Cole logo acima esse código:
.border {
-moz-opacity:0.70; opacity:0.70;
-webkit-transition-duration:2s;
background-color:#e7b3c2 /*Cor de fundo, aparece enquanto a imagem está carregando*/;
border:2px solid #c8debf; /* Cor e estilo da borda*/ }
.border:hover  {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
background-color:#e7b3c2; /*Cor de fundo quando passa o mouse em cima*/
border: 2px solid #f2ada5; /* Cor e estilo da borda quando passa o mouse em cima*/
}

Salve as alterações.
Para o código funcionar, você tem que por a tag class="border" no código da imagem, assim:
<img src="linkdaimagem" class="border"/>

Espero que tenham gostado, e se usar, comente e dê os créditos! Kissus

35 comentários

  1. Bem legal esse tutorial!!! Vou tentar depois :>
    Fica tão fofo ^______^
    beijinhus

    ResponderExcluir
  2. Legal os efeitos! Nossa seu blog eh perfeito, amo ele ! Parabéns! Beijoos ..

    www.diiariodeumgaroto.blogspot.com

    ResponderExcluir
  3. Já te falei qeu seus tutos são simplesmente perfeitos Liah?? tenho um blog só com links dos seus tutos, sempre que eu preciso de alguma coisa vou lá, ou venho aqui no CB. Nunca pare de postar, please!!

    XO, wishoffashion.blogspot.com

    ResponderExcluir
  4. Eu acho que fica lindo. Eu usava no meu tumblr.

    http://estilooque.blogspot.com/

    ResponderExcluir
  5. Já conhecia esse efeito! Mais o tuto é demais. Awn, fiquei tipo SUPER feliz por você ter usado o meu tutorial haha Beijos.

    ResponderExcluir
  6. Peace Love//Blog Oficial31 de agosto de 2011 18:11

    Ok Flor Vou Fazer Melhor O Tuto Acho Que Não Tem Nada Explicando ¬¬
    Como As Pessoas Iam Entender?!
    Obg' Por Comentar ;)

    ResponderExcluir
  7. Obrigada!
    haha seus tutos são ótimos flor <3

    ResponderExcluir
  8. esse feito é mt usado em tumblr mesmo ^^
    obg pelo comentário

    ResponderExcluir
  9. Esse efeito lembra bem os dos temas do Tumblr ^^
    Gostei

    ResponderExcluir
  10. Oii, poderias dar uma vistada no meu blog? Tem postagem nova!
    Gostei e gosto muito daqui, muito sucesso para você! Beijinhos, DF:
    www.fanticospornoticia.tk

    ResponderExcluir
  11. Alana Stankiewicz de Souza31 de agosto de 2011 19:59

    Amei, vou testar quando tiver um tempinho rs. Parabéns, o blog está muuito perfeito!
    goimagines.blogspot.com

    ResponderExcluir
  12. Eu adoro seus tutoriais, Liah!!!! Voc podia fazer um ensinando a  tirar o rodapé do blogger? Post novinho lá no blog, não esquece de comentar1

    backstage-gi.blogspot.com (seguindo)

    ResponderExcluir
  13. Adorei o post, o tutorial perfeito!

    http://blog-garotafutil.blogspot.com/

    ResponderExcluir
  14. eu amooo esse efeito! hihi
    beijos, http://destemidagarota.blogspot.com

    ResponderExcluir
  15. Tirar o radapé? Acho que não é mt útil, pq ele não aparece se vc não colocar nada nele...

    ResponderExcluir
  16. poderia fazer um post sobre vestidos de debutante ??? *_*

    ResponderExcluir
  17. Ai ficou lindo esse efeito! adoro adoro adoro!!!  E achei muuuuuito fofinho esse gatinho da foooto *u* Amo pets *u*
    http://fearless-girls.blogspot.com/

    ResponderExcluir
  18. Sim sim serissimo que bom que fica feliz TABEM FICO haha

    ResponderExcluir
  19. Amei o tutorial, vou usar em meu blog, onde você baixou o Photoshop Cs3? sempre procuro ele e nunca acho. Amo seu blog, beijos.

    ResponderExcluir
  20. oi amei o blog, estou seguindo
    segue de volta:
    lltudoaver.blogspot.com

    ResponderExcluir
  21. é pra colar em qualquer lugar no codigo na imagem?

    ResponderExcluir
  22. deu errado =/ pq será que nenhum dos codigos acima de ]]skin não pega?

    ResponderExcluir
  23. perfeitoo muito obrigada me ajudou muito.. amo seu blog ... seus tuto são muitooooo prestativos ...

    o meuuu tah caidinhooo me dah umas dicas ou me segue para ajuda-lo ? kkkkk
    http://cup-cakebycapuzvermelho.blogspot.com.br/

    ResponderExcluir
  24. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE- \\õ
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  25. Não consegui, no HTML diz que não existe o codigo ]]>

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...