3 Efeitos Hover para Imagens



Mais 3 efeitos para aqueles que gostam de ter as imagens diferenciadas, vamos ao tuto?
 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.


Vá em Modelo => HTML => Crtl F => ]]></b:skin>








Efeito Zoom

.post-body:hover img { -webkit-transform: scale(1.5); webkit-transform-origin: 50% 50%; -o-transform: scale(1.5); -o-transform-origin: 50% 50% 0; transform: scale(1.5); transform-origin: 50% 50% 0; }


Efeito Sépia 




.post-body img {-webkit-transition-duration: .90s;}.post-body img:hover{-webkit-transition-duration: .90s;-webkit-filter: sepia(100%);}



Efeito Arco-Íris 




.post-body img{filter: hue-rotate(360deg);-webkit-filter: hue-rotate(360deg);-moz-filter: hue-rotate(360deg);-webkit-filter;(1);-webkit-transition: all 0.7s linear;-moz-transition: all 0.7s linear;transition: all 0.7s linear} .post-body img:hover{filter: hue-rotate(0deg);-webkit-filter: hue-rotate(0deg);-moz-filter: hue-rotate(0deg);-webkit-filter;(0} 

Nenhum comentário:

Postar um comentário