Como Colocar Zoom na Imagem do Blog
Olá hoje, vou ensinar como dar um ZOOM nas imagens do Blogger com CSS, para vizualizar o efeito basta passa o mouse sobre a imagem abaixo:
Agora vamos fazer é bem simples:
1° Acesse o Painel de Controle do seu blog, Vá em Modelo >> e clique em : Personalizar.
2º Vá em Avançado >> Clique em Adicionar CSS .
E cole o código abaixo :
.post-body img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.post-body img:hover{
border:1px solid #000;
-webkit-transform: scale(1.302);
}
Agora vamos fazer é bem simples:
1° Acesse o Painel de Controle do seu blog, Vá em Modelo >> e clique em : Personalizar.
2º Vá em Avançado >> Clique em Adicionar CSS .
E cole o código abaixo :
.post-body img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.post-body img:hover{
border:1px solid #000;
-webkit-transform: scale(1.302);
}
Clique em Aplicar no Blog e pronto.
Observaçao:
1º A onde eu deixei em verde("1px"), é a espessura da borda da imagem em Zoom. Para mudar a espessura é só mudar o seguinte valor em verde("1") .
2º A onde eu deixei em Azul("#000"), é a cor da borda da imagem em Zoom. Para mudar a cor é só mudar o seguinte código em azul("#000") pela cor desejada.
3º A onde eu deixei em vermelho("1.302"), é o tamanho do Zoom. Para mudar o tamanho é só mudar o seguinte código em vermelho("1.302") pelo tamanho desejado.
Pronto, estará bem bonito no seu blogger.Por Favor curta minha page no Facebook,obrigado e até a proxima.
Pronto, estará bem bonito no seu blogger.Por Favor curta minha page no Facebook,obrigado e até a proxima.