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

Añadir la descripción del blog al título en Blo... Hoy compartire con ustedes un truco muy valioso en cuanto al posicionamiento web se refiere, ya que con este truco agregaremos una descripción al blo...
Cómo cambiar el cursor de tu blog Cambiar el cursor del mouse no parece ser algo muy importante según algunos Bloggers pero si quieres personalizar tu blog y darle un aspecto único u...
Mensaje para desactivar AdBlock Hoy les traigo un truco para sus blog o para sus webs que me parecio muy interesante ya que muchos matienen su web gracias a la publicidad y me parece...
Crear página de error 404 estilo Taringa! en Blog... Aprovechando una de las ultimas novedades que Blogger ha implementado (la de la pagina de error 404) decidí darle un nuevo aspecto a mi pagina de err...

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=""> <strike> <strong>