Efecto Zoom con rotación en los avatares

Con el nuevo diseño que introduje en el blog hice algunos cambios en los comentarios,entre ellos los avatares que al pasar el cursor sobre ellos tienen un efecto Zoom con rotación en los avatares.

Aqui les muestro una imagen  para que entiendan mejor el truco.


Como ven es un gran efecto y lo mejor es que se logra solamente mediante CSS sin agregar scripts ni nada por el estilo que solo van a poner mas lento tu blog.

Para agregar este truco ve a Diseño | Edición HTML y antes de ]]></b:skin> y 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;
}

Por ultimo guardas los cambios

Relacionados

Marcadores sociales de Mil Trucos Blogger para tu ... Varios usuarios me han pedido que comparta el estilo de mis marcadores sociales y como bien saben que aquí en Mil Trucos Blogger todo se comparte pue...
Formulario de contacto de Blogger flotante En el día de hoy voy a compartir un truco muy bueno, en el cual el gadget de formulario de contacto pasa a ser un gadget flotante y cambia en gran me...
Pop Up Follow de Twitter para Blogger En un mundo como el bloggero donde las redes sociales son una parte fundamental para dar a conocer nuestro contenido vale la pena crear formar ingenio...
Emoticones de Messenger para Blogger Ya he publicado varios artículos donde he mostrado distintos emoticones para Blogger,hoy la oportunidad es para los emoticones de Messenger,hay que a...

Share

20 comentarios en “Efecto Zoom con rotación en los avatares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>