27 de nov de 2012

Efeito Hover nas Imagens do Post

Hey, angels :) What's up?

A leitora Laris do ótimo blog Panda's Secrets pediu um tutorial:


Ela não especificou exatamente qual tipo de efeito ela queria, portanto eu trouxe 3 tipos (todos testados). Se ela quiser outro, posso pesquisar mais e ver se encontro.  
Vamos aos tutoriais?

Efeito 1: Opacidade

Vá em Design > Editar HTML. Tecle Ctrl + F e busque por ]]></b:skin> . Quando encontrar, cole o seguinte código ACIMA:
.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;
}

Usando esse código, a imagem terá o efeito opacidade após passar o mouse. Caso queira antes é só colar esse código acima da tag ]]></b:skin> :
.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;}

Créditos: Capture Dream

Efeito 2: Preto e Branco

Em seu HTML e usando Ctrl +F, procure a tag ]]></b:skin> e quando encontrar cole o seguinte código acima:
.peb{-webkit-transition: -webkit-filter 1s; }
.peb:hover{-webkit-filter: grayscale(100%); }

Agora, deve-se prestar atenção. Coloque a imagem que você quer que tenha esse efeito na postagem e quando ela carregar, troque Escrever por HTML.


No código da sua postagem, procure a sua imagem e quando encontrar localize o pedaço  /></a></div> . Antes de /> cole:
class="peb"
Não entendeu? Veja o print abaixo:


Efeito 3: Desfoque

Esse é basicamente a mesma coisa que o 2. Basta procurar por ]]></b:skin> e ANTES dessa tag colar o código abaixo:
.blur{-webkit-transition: -webkit-filter 1s;}
.blur:hover{-webkit-filter: blur(2px); }

Depois é só colocar a imagem que desejar na área da postagem e trocar Escrever por HTML. Encontre sua imagem e o pedaço /></a></div>. Antes de  /> coloque:
class="blur"
Exemplo:


Créditos do Efeito 2 e 3: Birthday Cake

Caso queiram mais algum - como informei no início do post - posso pesquisar mais e trazer. 
Dúvidas? Só mandar um comentário ou uma pergunta aqui.

Espero ter ajudado e espero que tenham entendido.
Beijos,

Mrs. Nightshade.

7 comentários:

  1. Respostas
    1. Fico feliz em saber que achou isso =D Obrigada ^^

      Beijos!

      Excluir
  2. Awn flor, brigado mesmo viu ? Eu te amo u-u Sua fofa *u*

    ResponderExcluir
    Respostas
    1. Olá! De nada, disponha *---* Idem, você é uma fofa <3

      Beijos!

      Excluir
  3. Usei o primeiro para um layout que estou fazendo,creditando você obvio...Usei quase todos os tutos daqui para esse lay hihi,gostei dos efeitos ^^

    -Pode postar como centralizar o titulo dos post?

    ResponderExcluir
    Respostas
    1. Olá! Awwwn, fico super feliz em saber *---* É muito importante pra mim ^^
      Já tem: http://tutoriais-mrs-nightshade.blogspot.com.br/2012/10/hey-angels-whats-up-peco-mil-desculpas.html

      Beijos!

      Excluir
  4. to tentando deixar meu blog bem bonitinho, adorei o post
    visita lá!
    http://20euns.blogspot.com.br/

    ResponderExcluir