28 janeiro, 2012

Maratona de Tutoriais, Último dia - Efeito em imagens

Tumblr_lvrd7wbvd01qc0o89o1_500_large_large

Oiiii minhas amorinhas =D  Antes de começar o tuto quero dizer que hoje é oúltimo dia da maratona   ='(    , mas daqui a algum tempo vai ter a Maratona de Goodies, não perca fique ligada(o) .  Bom vamos ao tuto, vou ensinar a : 
Imagem que muda ao passar o mouse, efeito opacidade nas imagem 2 jeitos e borda nas imagens da postagem ! 

Créditos aos blog :  Cute World   Coisas de Garotas   e  Material - Extra

Imagem que ao passar o mouse ela muda

Para isso use o código abaixo :
<img src="URL da imagem" onmouseover="this.src='URL da imagem ao passar o mouse'; return true" onmouseout="this.src='URL da primeira imagem'">
Onde está URL da imagem, troque pelo url da imagem quando o mouse não estiver por cima dela e onde está: URL da imagem ao passar o mouse   Você troca pela imagem de quando o mouse estiver por cima dela
e onde está : URL da primeira imagem   Coloque o URL da 1° imagem de quando o mouse não está por cima.

Resultado :
Créditos da imagem abaixo aqui



Efeito opacidade nas imagens 2 jeitos

Vá em Design > Editar HTML > Dê CTRL + F e procure por : ]]></b:skin>
Se você quiser que a imagem fique normal e quando o mouse passa por cima e dá o efeito cole acima dessa tag o código abaixo :     (Obs : Não testei nenhum dos dois, se não der certo, aí já não é comigo)

.main img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.main img:hover {
filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}
E se você quiser que a imagem já venha com o efeito e quando o mouse passa por cima ela volta ao normal cole acima da tag  ]]></b:skin>  cole o código abaixo :

.main img {

filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;
}

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

Borda nas imagens das postagens

Para adicionar bordas nas imagens das postagens Vá em design > Editar HTML > Dê CTRL + F e procure por :    ]]></b:skin>   e acima desta tag cole o código abaixo :

.post img{
border: 3px solid  #000000;
padding: 2px;}
.post a:hover img{
border: 3px solid  #FFFFFF;
}

 É bom saber, .post img é a cor da borda e .post a:hover img , é quando
o mouse passa por cima, em roxo altere as cores usando a  tabela,
em verde a espessura da borda, em azul, o formato dela exemplos, e em
vermelho a distancia que a borda ficará da imagem.
(OBS : Não testei, peguei este tuto do Material Extra, mas acho que a Karoline de lá testou)

Gente por hoje , é só Bjos no 

12 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. tambem amo seu blog,cheio de conteudo.
    da uma passadinha lá :) http://girlsmeninaa.blogspot.com/
    beijo ^*^!

    ResponderExcluir
  3. ooi flor,eu gostaria de saber como vc fez o seu layout e gostaria de saber se vc poderia fazer um template pra mim...beijokas

    ResponderExcluir
  4. Adorei os tutos flor! *-*

    Rawar--> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  5. São ótimos tutoriais, que deixam o blog cada vez mais lindo!

    Beijos,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  6. amei os tutoriais , e ja estou seguindo aqui , se puder segue de volta ?

    http://tolerancia-teen.blogspot.com/

    Bj =)

    ResponderExcluir
  7. Adorei os tutoriais, são muito legais *-* Bjs

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

    ResponderExcluir
  8. Muito bom os tutoriai, já estou seguindo
    Bjs
    neversaynever-believe.blogspot.com

    ResponderExcluir
  9. amei seu cantinho e estou seguindo,ficaria muito grata se você pudesse me seguir de volta.bjs
    http://simonebastos2007.blogspot.com/

    ResponderExcluir
  10. Oie!

    AMEI seus tutoriais, super bacana! Seu blog tem extras super bacanas e é tudo muito divertido aqui, vai ter muito sucesso futuramente *-*

    Vou seguir o blog.

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  11. De nada querida! Se prepare que eu já estou vendo a sua fama u_u Continue assim miga!

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  12. Super show os tutoriais. Muito bem explicados!
    Parabéns, já estou seguindo.
    Bjoo

    clove-cinnamon.blogspot.com

    ResponderExcluir