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

Iconos sociales para Blogger y WordPress con efect... En el día de hoy vamos a ver un truco que sirve tanto para Blogger como para WordPress, puesto que se basa en simple CSS qu es reconocido por ambas p...
Brujas que caen y se desvanecen en el blog Siguiendo con los trucos para decorar tu blog en Halloween, hoy comparto un gran truco para  que decores tu blog  acorde a esta época, en la cual e...
Sencillo Social Content Locker para Blogger Muchas veces queremos bloquear un contenido de descarga especifico con el fin de crear algo similar a un "contenido premium" y que las personas deban ...
Gadget de Últimas entradas Ya he publicado varios estilos del gadget de últimas entradas, incluso hace un par de semana publique uno muy bueno pero el de hoy es también muy bu...

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>