Efeito CSS nas imagens do Blog (Versão 2)

► +A +/- -A
Olá Caro leitor do Tecnoblog, Hoje neste Artigo, venho ensinando como Adicionar o Novo Efeito nas imagens Disponibilizado por nós aqui do TB. Como vocês Sabem, Anteriormente publiquei a Seguinte post:  Efeito CSS nas imagens do Blog (Versão 1), Então Dando continuação Venho ensinando Instalar a a "Versão 2 Do Efeito", Então Siga o Tutorial de Como instala-lo Abaixo.

Instalando no Blog

Para Instalar Faça os Seguintes Passos:

1. Faça o Login no Blogger
2. Vá em Modelo
3. Em seguida clique no botão Editar HTML
4. E procure pela seguinte Tag:

]]></b:skin>

5. E Acima dele Adicione o Seguinte código:


/* ----- Efeito Imagens 2----- */
img.result{
width: 250px;
height: 250px;

margin: 4px;
border: solid 1px #000;
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.9;
-webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
}
img.result:hover{
border: solid 1px #000;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 20px black;
-webkit-box-shadow:0px 0px 20px black;
-moz-box-shadow:0px 0px 20px black;
opacity: 1;
-webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
}


6. Em Width e Height Você poderá ajustar as larguras da imagem(s)
6. Depois do CSS Adicionado Ao Blog, Vamos a Aprender como usa-lo.

Aprendendo a Usar

1. Para usar Este Belo Efeito você terá que usar o Seguinte código:


<a href="URL do link" target="_blank"><img src="URL da imagem" class="result" /></a></div>

A 1ª Parte em Negrito Significa a Parte que você deverá substituir pelo link que a imagem será redirecionada, a 2ª Parte em negrito corresponde a parte que você deverá substituir pela URL da imagem.
► Postagens Relacionadas:

10 Comentários

Alisson-lk2 disse...

Este Efeito é perfeito Caio, Muito bom, parabéns.

16 de março de 2012 às 11:54
Caio Vinicius disse...

Muito Obrigado por comentar Alisson, Agradeço por ter gostado.

16 de março de 2012 às 13:17
Lucas Hard Rock disse...

PQP era isso mesmo que eu queria parabens pelo blog e pelo tutorial nota 10 manolo :D

1 de abril de 2012 às 15:56
Caio Vinicius disse...

Obrigado Pelo Elogio Lucas, Fico Grato :D. Até mais. Fica Com Deus!

1 de abril de 2012 às 16:02
Lucas Hard Rock disse...

Amém vc tbm belo blog flw té

1 de abril de 2012 às 16:18
Caio Vinicius disse...

Até!

1 de abril de 2012 às 16:43
Herlan Santos disse...

Muito bom o efeito, parabéns pelo artigo Caio.

10 de abril de 2012 às 13:43
Caio Vinicius disse...

Olá Herlan, Que bom que gostou do Artigo, Obrigado pelo elogio. Até mais. Fica com Deus.

10 de abril de 2012 às 13:57
Sistematic disse...

ae será que não tem como colocar esse efeito na imagem com a resolução normal só acrescentar o zoom?

20 de junho de 2012 às 14:36
Caio Vinicius disse...

Olá Sistematic, para isso basta remover o código que consta a parte: width: 250px;
height: 250px;
E Pronto! Espero ter ajudado! Até mais!

20 de junho de 2012 às 21:47

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!