Galeria de imagens com efeito Zoom/hover

Um tutu super legal hoje *o* quem tá afim de conferir levanta a mão \o/. Ok confesso acordei meia lesada hoje, hauhauahuaha. Mais falando sobre o tutorial é basicamente isso, uma galeria de imagens que quando você passa o mousse a imagem aumenta. É possível adicionar links, porém tem que abrir em uma nova Guia. Enfim vejam

Live a preview 

Lembrando os créditos vão para o Mundo Blogger .Super legal né? Você pode ter uma igualzinha no seu blog com apenas 3 passos super fáceis! 

 Vá no seu HTML marque a opção expandir modelos de Widgets e procure por   

 ]]></b:skin> 

Cole o código abaixo, ACIMA de ]]></b:skin> 


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnUehdScNv6FZ4LD5jyzufWiMHldCoRTQY3pt5MzsZkQNYw46iKfj-C3DQhRWG8tFBlA4lNbTDDCaEpdyt_Hp1XrqWNyUzfDPCWJ2BGVlYE7_W8sOn7lu5XxU9nKACCt7eUXS_rmKyTxF/) no-repeat center center;
border: none;
}

 Agora procure por: </head>  e cole o seguinte código ANTES da tag destacada:

<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>

 Salve as modificações

 Agora vá em Design  Elementos da página  Adicionar um Gadget e Selecione a opção HTML/JavaScript e cole o seguinte código dentro dele:

<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>

Para inserir mais imagens á galeria, repita a linha abaixo antes do código </ul> :

<li><a href="LINK"><img src="URL-IMAGEM" alt="" /></a></li>

Não esqueça de colocar a url da sua imagem ou o link de destino(se quiser)nos trechos destacados

Fácil né? Espero que tenham curtido!

Confiram minha página +tags, ficou super legal com esse efeito.