Ampliando a Imagem ao passar o Mouse

► +A +/- -A
Olá Queridos Leitores, Hoje no nosso Artigo, eu vou ensinar como Adicionar um Efeito bastante legal em seu blog, ou seja este tutorial fará que ao Visitante/Leitor ao passar o mouse sobre a imagem do seu Blog ela ficara com um efeito de zoom. Então Vamos aprender a instalar este efeito em seu Blog.

Instalando ao Blog

1. Faça o Login no Blogger
2. Em seguida vá na Aba Modelo
3. Depois Clique no Botão Editar HTML
4. E procure pela seguinte Tag:

]]></b:skin>

5. E Acima dela adicione o seguinte código: 

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: black;
padding: 5px;
left: -100px;
border: 5px double gray;
visibility: hidden;
color: #ffffff;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 10px;


6. Clique em Salvar, e Se estiver tudo Certo Clique em Salvar Modelo.


7. Agora para usar o código nas imagens use o seguinte código:


<a class="thumbnail" href="#thumb"><img src="URL_DA_IMAGEM" width="100px" height="80px" border="0" /><span><img src="URL_DA_IMAGEM" /><br />Legenda da Imagem</span></a> 


Avisando: As partes destacadas de Vermelho é aonde você devera substituir pela URL da imagem, a Parte destacada de Azul você devera substituir pela legenda da imagem.


Pronto, Artigo Finalizado.
Até mais Pessoal. Fiquem Com Deus.
► Postagens Relacionadas:

15 Comentários

Daniel Silva disse...

Olá Caio, esse post está muito bom! excelente! gostei muito do código e irei utiliza-lo em meu blog, muito obrigado por deixar esse código. Abraço na alma amigo!

Parabéns pelo ótimo blog que desenvolveste.

28 de março de 2012 às 14:48
Caio Vinicius disse...

Olá Daniel, Fico Bastante Agradecido por me elogiar, Afinal, Seu Blog anda muito Bem! Agradeço por gostar do Post. Até mais. Um Abração na Alma. :D

28 de março de 2012 às 14:59
Caio Vinicius disse...

Vlw cara isso que eu procurava pro meu blog. o efeito é demais quando passa o mouse, ele gira, bem legal cara, no meu teve um problema porque meu template é ruim, mas eu concertei ele. abraço gostei do artigo.

1 de abril de 2012 às 16:46
Simon disse...

Vlw cara isso que eu procurava pro meu blog. o efeito é demais quando passa o mouse, ele gira, bem legal cara, no meu teve um problema porque meu template é ruim, mas eu concertei ele. abraço gostei do artigo.

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

Obrigado por elogiar meu Blog :D. Obrigado por participar. Até mais. Fica com Deus. Abraços.

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

Muito bom esse efeito de zoom em imagens ao passar o mouse, dá mais destaque a elas!
Ótimo tutorial Caio.

7 de abril de 2012 às 23:41
Caio Vinicius disse...

Olá Herlan, Muito Obrigado por participar dos nossos posts, e novamente Obrigado por comentar em nosso Blog. Até mais, Fica com Deus amigo!

8 de abril de 2012 às 11:48
Izaque Liborio disse...

Caio. a tag ]]> não esta funcionando mais em meu blog, você sabe o que seria esse erro ?

9 de abril de 2012 às 18:39
Caio Vinicius disse...

O.o Como não? Como assim ela não esta funcionando? Me explique bem a situação que acho que talvez eu poderei ajudar, que eu saiba ela que funciona para que todo o CSS do blog se mantenha junto com o Style ou seja ]]>.
Até mais, Espero sua resposta. Boa Sorte e Fica com Deus.

10 de abril de 2012 às 13:47
Izaque Liborio disse...

Desculpe pela demora, sempre que aplico o css ele não funciona atraves dessa tag

14 de abril de 2012 às 18:32
Caio Vinicius disse...

Hmmm, Entendi .. Isto eu acho que já aconteceu comigo, Tente fazer isto: Cole o CSS antes de qualquer código que você possuir antes da Tag Style (]]>) E provavelmente o erro sumirá!

15 de abril de 2012 às 19:50
Izaque Liborio disse...

Como ? não entendi, você pode me ajudar a concertar ? pode fazer isso pra mim ? eu não consigo, eu agradeço.

15 de abril de 2012 às 21:16
Caio Vinicius disse...

Sim! Ajudo Izaque, Só basta você me adicionar como Administrador do seu Blog e quando eu terminar você me tira como Administrador, acho que o método que vou fazer, provavelmente dará certo! Envie o E-mail de solicitação para: tecnoblog.contato123@gmail.com .
Até mais. Abraços!

Atenção: Como falei, não tenho toda certeza que oque vou fazer dará certo! Mas se Deus Quiser Dará Certo :D!

15 de abril de 2012 às 21:21
Izaque Liborio disse...

Já adicionei Caio, mas você terá que aceitar primeiro para eu colocar como adiministrador, aceite la e eu coloco.

16 de abril de 2012 às 13:08
Caio Vinicius disse...

Pronto, Tudo Feito, Agora eu Irei Tentar arrumar!

16 de abril de 2012 às 13:49

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!