Efecto Zoom para autores del blog

Hola hola chicas!!  Pss hace tiempo quería preguntar...... les gusta el nuevo diseño?? ahh bueno lo cambie no se porque es que siempre ver lo mismo aveces aburre pero bueno.

Hoy les traigo un tuto de como poner la descripcion del autor del blog dentro de una imagen!! se preguntaran como pss mira en ejemplo en mi blog de pruebas ^.^

Ok si les gusta, empecemos:
Ve a Plantilla  Edicion del HTML Busca:

 ]]></b:skin

Luego encima del codigo buscado anteriormente pegamos el siguiente codigo:

#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 ;
}

Damos vista previa que todo este bien y guardamos.

Luego se van a agregar un gadget de HTML/JavaScript y pegan el siguiente codigo:

<div id="zooming" class="zoomingout"><img src="Link de tu imagen" class="image4" />
<div id="palavras"><a href="link" class="header">Texto color rojo</a>
<br />
El texto de tus datos</div></div>

Le das a vista previa y a guardar!! y eso seria todo