6 Efeito visual nas fotos - Zoom, Arcoiris, giro e Background

Entre em um blog de um amigo e achei lindo o efeito das fotos ao passar o mouse, e procurei muito saber como colocava, vi tutoriais que tinha que hospedar uma foto aqui outra aculá e assim fica difícil então o Wil me mandou a dica e vou compartilhar com vocês.É super simples de colocar o efeito, e os de mudança de cor são os mais leves e não alteram quase nada na velocidade... então vamos lá.

Primeiro vamos saber onde será colocado o código, sabendo disso ficara muito fácil

1- Entre em sua interfase do blogger, selecione "Modelo" 2- Abra "Personalizar" 3 - Vá para 'Avançado" 4 - Após abrir a opção de "Avançado" escolha a ultima opção da pela interfase chamada  "Adicionar CSS" que abrirá uma caixa em branco para ser inserido o código, 5 - Cole o código do efeito escolhido e salve, pronto todas a sua imagens do blog, estará  com o efeito escolhido.

Agora é só escolher o Codigo e inserir 

Efeito mostrar background com listras                 .post-body img{ border: 0; /* borda na imagem em zero, não altere */ margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */ padding: 0; /* espaço entre margens e imagem, não altere */ max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */ -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .post-body img:hover{ width:auto; border: dashed 4px #ff73da; -webkit-transform: rotatex(-360deg); -webkit-transition-duration: 1.00s; -moz-transition-duration: 1.00s; transition-duration: 1.00s;}	Efeito transitório para dentro                                          .post-body img{ border: 0; /* borda na imagem em zero, não altere */ margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */ padding: 0; /* espaço entre margens e imagem, não altere */ max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */ -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .post-body img:hover{            width:auto;           -webkit-transform: rotateY(-360deg);           -webkit-transition-duration: 1.00s;           -moz-transition-duration: 1.00s;           transition-duration: 1.00s}
Efeito giro 360º                   .post-body img{ border: 0; /* borda na imagem em zero, não altere */ margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */ padding: 0; /* espaço entre margens e imagem, não altere */ max-width: 480px; /* tamanho máximo da imagem, pode e deve ser alterado */ -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; } .post-body img:hover{ -moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}	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 Preto e branco   .post-body img {-webkit-transition-duration: .90s;} .post-body img:hover{-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);} 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}	Efeito arredondar margens imagem        .post-body img { -webkit-transition-duration: .50s; border-radius: 10px 10px 10px 10px; } .post-body img:hover { -webkit-transition-duration: .50s; border-radius: 260px 260px 260px 260px; }

    

Demonstração

    Você também pode colocar em apenas uma postagem especifica, inserindo 1 dos códigos a cima dentro de <div></div>  ou <style></style>

Assim:

Abra "div" e feche, dentro dela coloque "style" 

<div> Aqui coloque a imagem<style>aqui coloque o codigo acima escolhido</style></div>

    Duvidas estou a disposição é só deixar um comentário!