2 de out de 2013

Efeito Zoom de Imagens nas postagens do Blog


 E ae queridus di my heart.
 Yeap, eu sei, eu sei, estou atrasada a ler e comentar os posts de muitos blogs que comentaram aqui e também daqueles que sigo. Sorry, eu andei meio ocupada. Mas não terei aula sexta, segunda e terça e até lá, eu espero, acho que terei comentado e lido todas as postagens e ficado em dia.
 Meu celular novo chegou, e ele é tão lindo, mas tão lindo, que tô com medo de usar.
 Sabem, eu sou uma lerda, descoordenada sem noção, e é bem provável que até o final do próximo ano esse celular já tenha ido pro saco... Bem, ai eu compro outro né... de novo... Ah, enfim, vamo pra postagem.

 Só posto tutoriais daquilo que acho interessante no meio da blogosfera. Entre essas coisas, achei um efeito bem legal do Várias Dicas para Blogs
 Em seu código de HTML, pesquise pelo trecho: ]]></b:skin>

 Acima dele, cole:


.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);
}

 Visualize e, se tudo estiver certo, salve.
 Para aumentar ou diminuir o Zoom da imagem, mude o valor de 1.302. O trecho em vermelho corresponde a borda da imagem, altere a espessura em 1px e a cor em #000, caso não queira borda, apague esse trecho.
 Você pode adicionar uma "sombra" em volta da imagem adicionando o seguinte trecho de código a onde esta o trecho em vermelho:
 box-shadow: 1px 1px 1px #000;

2 comentários:

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão