Efeito na Imagem 'Zoom/Hover' + Resultado da diferença da 2° Imagem

11 Deixa um comentário
Tumblr_lyr7jyyuft1qemcfvo1_500_large

Oii gente,
vamos com mais um tutorial de imagem com JQuery,esse tutorial é bem fácil ,
eu acho esse efeito bem legal para colocar os 'afiliados. A imagem fica pequena e quando
passa o mouse ela fica um pouco maior. DEMO 
Vamos lá ;)

Em Design > Editar HTML > 'Expandir modelos de widgets'

e Ctrl + F procure por ]]></b:skin> e cole acima o seguinte código

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://3.bp.blogspot.com/-moGWp2BBfak/TysTR59yk_I/AAAAAAAABRQ/Z5MJzf8iJKY/s1600/thumb_bg.png) no-repeat center center;
border: none;
}



Procure por </head> e cole o código abaixo,acima dele.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>



Agora em Design > Elemento de página > HTML/Java Script cole o seguinte código


<ul class="thumb">
<li><a href="LINK1"><img src="URL-IMAGEM1" alt="" /></a></li>
<li><a href="LINK2"><img src="URL-IMAGEM2" alt="" /></a></li>
<li><a href="LINK3"><img src="URL-IMAGEM3" alt="" /></a></li>
<li><a href="LINK4"><img src="URL-IMAGEM4" alt="" /></a></li>
</ul>


É isso ai queridos,
Espero que tenham gostado.

----------------------------------------------------------------


Agora vamos ao resultado da diferança da 2° imagem,
muitas meninas acertaram Veve Pink | Andreza Paixão | Mariana
Veja :

Coloquei umas bolinhas no 3° recheio
Puxei o recheio mais para baixo/aumentei
Colori de rosa chiclete
Colori de pink 

É isso ai (:
Obrigada a tooodos que comentaaraam e participaraam  ;) 

Kiss
  


Volte sempre, tá?

11 comentários:

  1. Legal, talvez eu coloque no meu próximo lay, tem post novo lá no blog, vê se aparece por lá, beijos.
    http://fasesdegarota.blogspot.com/2012/02/vale-pena-ser-popular-selinhos.html

    ResponderExcluir
  2. aim que bom qe eu acertei rs


    http://dezapaixao.blogspot.com/

    ResponderExcluir
  3. Adorei a dica, beijos!

    http://www.byjessicarodrigues.com

    ResponderExcluir
  4. Adorei o Tutorial, muito bom *-*

    Ps. a ideia desse jogo pertence a mim então eu gostaria que antes pedissem permissão pra fazer, pra não ficar chato depois =/

    ResponderExcluir
  5. Heey, adorei o seu blog! Estou seguindo, segue o meu também?
    http://estanteseletiva.blogspot.com/

    Beijos,
    Wanessa Guimarães
    www.estanteseletiva.blogspot.com

    ResponderExcluir
  6. Haha, legal essa brincadeira :)
    vê se aparece mais vezes lá no blog, beijos.
    http://fasesdegarota.blogspot.com

    ResponderExcluir
  7. Desculpa flor, mas é bem improvavel.

    ResponderExcluir
  8. Lindo o blog, e nossa nunca eu ia achar essas diferenças
    ^^
    seguindo segue de volta?
    http://blogtudodesbloqueado.blogspot.com/

    ResponderExcluir
  9. Adorei o tutorial, ficou muito bom. Talvez eu use lá no blog no layout que está por vir.
    E sobre a brincadeira, não deu tempo de participar, mas achei super legal.

    Fernanda.
    http://meianoiteequinze.blogspot.com

    ResponderExcluir
  10. Adorei o tuto!Muito bom!
    Quer fazer parceria com o meu blog?
    jardimdadoçura.blogspot.com
    meu email:kittie200226@yahoo.com.br
    Bj :*

    ResponderExcluir

O que achou da postagem?
Lembrando que ....
- Não aceito selinhos e tags ;)
- Não participo de sorteios de maquiagens e de bijuterias
- Não irei participar de concursos no momento.