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.

efeito zoom

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>):
<li><a href="URL_Destino"><img src="IMAGEM"/><span>TEXTO</span></a></li>


COMENTÁRIOS

BLOGGER: 5
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Imagens com efeito zoom no Blogger
Imagens com efeito zoom no Blogger
Aprenda a colocar imagens com efeito zoom no Blogger
http://1.bp.blogspot.com/-EqszNhZ2I0E/UCLGypCH_TI/AAAAAAAABLc/GbtprhrhvVQ/s320/EfectoZoom.gif
http://1.bp.blogspot.com/-EqszNhZ2I0E/UCLGypCH_TI/AAAAAAAABLc/GbtprhrhvVQ/s72-c/EfectoZoom.gif
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/08/imagens-com-efeito-zoom-no-blogger.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/08/imagens-com-efeito-zoom-no-blogger.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar