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.
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>
10 Comentários
Este Efeito é perfeito Caio, Muito bom, parabéns.
16 de março de 2012 às 11:54Muito Obrigado por comentar Alisson, Agradeço por ter gostado.
16 de março de 2012 às 13:17PQP era isso mesmo que eu queria parabens pelo blog e pelo tutorial nota 10 manolo :D
1 de abril de 2012 às 15:56Obrigado Pelo Elogio Lucas, Fico Grato :D. Até mais. Fica Com Deus!
1 de abril de 2012 às 16:02Amém vc tbm belo blog flw té
1 de abril de 2012 às 16:18Até!
1 de abril de 2012 às 16:43Muito bom o efeito, parabéns pelo artigo Caio.
10 de abril de 2012 às 13:43Olá Herlan, Que bom que gostou do Artigo, Obrigado pelo elogio. Até mais. Fica com Deus.
10 de abril de 2012 às 13:57ae 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:36Olá Sistematic, para isso basta remover o código que consta a parte: width: 250px;
20 de junho de 2012 às 21:47height: 250px;
E Pronto! Espero ter ajudado! Até mais!
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!