Yoo ~~
Trouxe 2 efeitos legais para você deixar nas imagens do seu post !
Efeito Preto e Branco e Desfoque na imagem do post.
Vamos ver ?!
Vá no seu HTML e procure por:
]]></b:skin>
Se você quiser o efeito preto e branco cole o código abaixo Acima da tag !
.peb{-webkit-transition: -webkit-filter 1s; }.peb:hover{-webkit-filter: grayscale(100%); }
Salve, depois no post aplique a imagem desejada e faça que nem no print abaixo:
Antes da tag ... /></a></div> no espaco antes de /> cole:
class="peb"
Para o efeito desfoque você ira colar a tag abaixo antes de ]]></b:skin>
.blur{-webkit-transition: -webkit-filter 1s;}.blur:hover{-webkit-filter: blur(2px); }
E faça o mesmo processo na postagem só que no de vez colocar class="peb" cole:
class="blur"
Legal, Thiago.
ResponderExcluirMas dá para fazer com que a imagem apareça em preto e branco e quando coloca o mouse encima ela fica colorida?
ResponderExcluirNope ! Só da desse jeito que eu ensinei !
ExcluirDa pra fazer dessa forma sim Isaia MD, o codigo ficaria dessa maneira:
Excluir.peb{-webkit-filter: grayscale(100%); -webkit-transition: -webkit-filter 1s;}
.peb:hover{-webkit-filter: grayscale(0%); }
espero ter ajudado.
http://www.seuproblematico.blogspot.com.br
Obrigado tbm ><
ExcluirNão sabia !
Sorry ~~
Show de bola, vale mesmo, Thiago e Seu Problemático! :]
ExcluirDesculpa tantos comentários, mas o efeito só funciona no google chrome, certo?
ResponderExcluirNão ele funciona tanto no chrome, quanto no firefox, Explorer ...
ExcluirNana nina, funciona não amigo. No Windows Seven, usando Mozilla atualizado e IE 9 não funfa. =/
ExcluirPois nos meus navegadores, funciona!
ExcluirAqui também só funciona no Chrome. Assim como as bordas arredondadas. :(
ExcluirSe alguém quiser um efeito hover que está sendo usado nas imagens da barra lateral desse blog, é só utilizar esse código css, e seguir os mesmos procedimentos que o @Thiago Vinicius já ensinou nesse post!
ResponderExcluirCódigo:
.peb{filter:alpha(opacity=45); -moz-opacity:0.45; opacity:0.45;-webkit-transition-duration: .70s;}
.peb:hover{filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;;}
qualquer outra duvida: http://www.seuproblematico.blogspot.com.br
Thiago parabéns pelo explicação, ajudou muito ^^ !
Obrigado ^^
ExcluirVou postar o tutorial tá ?
Ameeeeeei *u*
ResponderExcluirObrigado ~~
ExcluirMutio fera :3
ResponderExcluirKKKK valeeew c:
ExcluirAdoreeeeei *-*, seguindo aqui.
ResponderExcluirBlog perfeito!
b-design-blog.blogspot.com
oooobrigado :3
ExcluirNão da pra colocar automatico? sou preguiçosa kkk '-'
ResponderExcluir