Efeito "Zoom" ao passar o mouse em imagens


Olá amigos, neste artigo venho mostrar a vocês como adicionar um efeito ao seu blog, para que quando os leitores passem o mouse acima das imagens elas aumentaram de tamanho dando um efeito de zoom ( aproximação ).
O efeito é muito elegante e simples de ser adicionado ao blog, então vamos ao tutorial

- Efeito "neon" em links do blog.
- Efeitos Estrelinhas Caindo do Ponteiro do Mouse

Tutorial
1. Faça login no painel de seu blog
2. Clique na guia "Modelo"
3. Após isso clique em "Editar HTML"
4. Agora segure Ctrl+F procure pela tag abaixo:
]]></b:skin>
5. E acima  dela cole 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", confira se está tudo certo e clique em "Salvar Modelo"

7. Para utilizar o efeito nas imagens, é preciso utilizar 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>
Substitua as partes em vermelho pelo URL/Endereço da imagem, e a parte em azul, pela sua legenda.

Pronto pessoal, até a próxima!


Gostou? Compartilhe:
Marcadores:

>

>