Imagens com efeito zoom no Blogger

Aprenda a colocar imagens com efeito zoom no Blogger

Desta vez, irei mostrar um truque em que as imagens do blog, permite um ótimo efeito zoom quando você passa o mouse sobre elas, este grande truque é realizado através de CSS.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

Aqui você pode ver uma prévia do truque.

Para adicionar este truque cole o seguinte CSS antes de ]]></b:skin>:

.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* As imagens serão em forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}

.expandir ul li {
float:left;
list-style-type:none;
}
/* Anular estilo predifinido para links em listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagem na posição inicial e transação suave */
.expandir ul li a img {
width:32px; /* Largura inicial imagens. 50% real */
height:32px; /* Altura inicial imagens. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* O texto que acompanha as imagens não é visto inicialmente */
.expandir ul li a span {
display:none;
}
/* O texto mostrado ao passar o mouse */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Ampliando a imagem ao passar o mouse */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

Nesse código, estão incluídas algumas linhas para explicar um pouco do conteúdo CSS.

Agora adicione o seguinte código HTML na parte que você quer (pode ser um HTML/Javascript)

<div class="expandir">
<ul>
<li><a href="URL_Destino1"><img src="IMAGEM1"/><span>TEXTO1</span></a></li>
<li><a href="URL_Destino2"><img src="IMAGEM2"/><span>TEXTO2</span></a></li>
<li><a href="URL_Destino3"><img src="IMAGEM3"/><span>TEXTO3</span></a></li>
</ul>
</div>

O que está indicado em verde corresponde a URL de destino, a URL da imagem e do texto a ser exibido.

Para adicionar outras imagens, só precisa adicionar a seguinte estrutura (antes de </ul>):