domingo, 11 de noviembre de 2012

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

4 comentarios:

  1. aww que monada OnO lo malo es que cuando me pongo con estas cosas acabo con el blog todo lag xD

    ResponderEliminar
    Respuestas
    1. Naa Tamy intentalo!! es super facil y muy lindo!! solo son dos codes faciles de usar!!
      si quieres tu puedes ^.^

      Eliminar

Gracias por dejar tu lindo comentario, seguro que te lo devuelvo n.n