Efeito Zooming

Hayooo desta vez trago um tutorial, que tem muita gente usando!!! O efeito Zooming, feito pela Kαorii-chαn do blog/site Kawaii World, então ai esta os devidos créditos rsrsr. Esse estilo de menu com imagem é ótimo para postadores, ou categorias. Caso queira ver o efeito, basta clicar no link mais abaixo.

Brevia do efeito

1. Para adicionar este efeito, vá em seu HTML e procure por ]]></b:skin>. Assim que o achar, adicione o código abaixo acima dele e Salve! 

,

Códigos

#zooming {
width:110px;
height:110px;
display: inline-block;
position:relative;
}
#zooming img {
position:absolute;
width:110px;
height:110px;
-webkit-transition-duration: .80s;
}
#zooming:hover img{
 -webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
 -o-transform:scale(1.5);
opacity:0.3;
-webkit-transition-duration: .70s;
}
.zoomingout {
float:center;
width:110px;
height:110px;
border: 2px solid #e4a2c7;
overflow:hidden;
-webkit-transition-duration: .59s;
 }
.zoomingout:hover {
float:center;
width:110px;height:110px;
border: 2px solid #e377b4;
overflow:hidden;
-webkit-transition-duration: .59s;
 }
#palavras a.header {
width:110px;
height:110px;
margin-left:-1px;
opacity:1;
margin-top:-0px;
padding:4px;
text-align: center;
color:#bb4487;
font-size: 10px;
padding: 5px 2px 10px  2px ;
}

#palavras {
width:110px;
height:110px;
margin-left:-1px;
opacity:1;
margin-top:-0px;
padding:4px;
text-align: center;
color:#434343;
font-size: 10px;
padding: 5px 2px 10px  2px ;
}

2. Agora vá em Layout abra um novo gadget java script e dentro dele cole:

Códigos

<div id="zooming" class="zoomingout"><img src="LINK DA SUA IMAGEM" class="image4" />
<div id="palavras"><a href="link" class="header">TEXTO EM ROXO OU OUTRA COR</a>
<br />TEXTO TEXTO TEXTO</div></div>

Basta colocar o link da imagem, o nome e texto como se pede.