2/3/12

Efecto zoom con rotación en los avatares

Si quieres hacer más elegante los comentarios en tu blog, este efecto podría hacer que se vea más elegante, ya que con que pases el cursor sobre el avatar de un comentario, este efecto hace que se haga una rotación y una ampliación al avatar.


Aquí hay un ejemplo de cómo quedaría un comentario al agregar el efecto:


Como ves, es un gran efecto y sólo se logra mediante CSS sin agregar scripts ni nada por el estilo que pondrían más lento tu blog.

Para agregar el efecto, entra a Diseño > Edición de HTML y antes de ]]></b:skin> agrega lo siguiente:

.avatar-image-container:hover {
z-index:999999;
border: 4px solid white;
-webkit-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-o-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
Guarda los cambios y listo. También puedes cambiar lo siguiente (lo más importante se podría decir):

border: 4px - Es el anchor del borde que rodea el avatar.
white - Es el color del borde que rodea la imagen.

No hay comentarios:

Publicar un comentario