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.
Muito bom bem explicado , !
ResponderExcluirFico feliz em saber que achou isso =D Obrigada ^^
ExcluirBeijos!
Awn flor, brigado mesmo viu ? Eu te amo u-u Sua fofa *u*
ResponderExcluirOlá! De nada, disponha *---* Idem, você é uma fofa <3
ExcluirBeijos!
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 ^^
ResponderExcluir-Pode postar como centralizar o titulo dos post?
Olá! Awwwn, fico super feliz em saber *---* É muito importante pra mim ^^
ExcluirJá tem: http://tutoriais-mrs-nightshade.blogspot.com.br/2012/10/hey-angels-whats-up-peco-mil-desculpas.html
Beijos!
to tentando deixar meu blog bem bonitinho, adorei o post
ResponderExcluirvisita lá!
http://20euns.blogspot.com.br/