Aumentar imagens ao passar o mouse com efeito deslizante

Aprenda a expandir imagens, ao passar o mouse, usando Expando.

Existem muitos métodos para expandir imagens ao passar o mouse, um deles é Expando, um script que permite que a imagem aumente a seu tamanho real com um efeito deslizante e ao remover o mouse a imagem retorna ao tamanho pequeno, também com o mesmo efeito.

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


Você pode ver a demo aqui mesmo passando o mouse sobre a imagem em miniatura:








Para conseguir esse efeito em suas imagens entre no Editar HTML e adicionar antes de </head> o script:

<script type="text/javascript">
//<![CDATA[
/* Expando Image Script 2008 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   */
if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    im.title = '';
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };
  expConIm.ims = {};
  expConIm.r = new RegExp('\\bexpando\\b');
  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}
//]]>
</script>
<style>
img.expando{
border: none;
margin:10px;
vertical-align: top;
}
</style>

E então, em seus posts ou onde você quiser, use este código para suas imagens:
<img border="0" src="URL da imagem" class="expando" width="100" />
Adicione o URL da imagem, onde indicado e pronto, tão fácil e simples.
A imagem deve ser colocada no tamanho normal, e onde está na cor azul deverá colocar o tamanho que terá a miniatura.


COMENTÁRIOS

BLOGGER: 13
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: Aumentar imagens ao passar o mouse com efeito deslizante
Aumentar imagens ao passar o mouse com efeito deslizante
Aprenda a expandir imagens, ao passar o mouse, usando Expando.
http://4.bp.blogspot.com/-KAv7eGhw5GY/T6r5OQzRoKI/AAAAAAAACO0/nw54aYj5sJQ/s320/Manzana_o.jpeg
http://4.bp.blogspot.com/-KAv7eGhw5GY/T6r5OQzRoKI/AAAAAAAACO0/nw54aYj5sJQ/s72-c/Manzana_o.jpeg
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/04/aumentar-imagens-ao-passar-o-mouse.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/04/aumentar-imagens-ao-passar-o-mouse.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