Tuto: Efeito zooming

Gente, hoje eu trouxe o tuto sobre o "efeito zooming" que você pode olhas aki! ou na demostração abaixo.

efeito zooming normal!

ao clicar a imagem fica assim!

Bem o tuto é bem fácil. Vamos lá?

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole:

#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 HTML/Java Script e cole o código abaixo fazendo as devidas modificações!

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

Fácil?Se utilizar comente! Até