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...
ToolTip con jQuery para Blogger Los ToolTip son herramientas muy útiles en el diseño, pues muy discretamente proporcionan información sobre un objeto (puede ser una imagen que es ...
Poner Etiquetas al Estilo Taringa en Blogger Cansado de mostrar las etiquetas con un simple texto, de esta forma obtendrás un toque mas profesional de calidad, mostraras las etiquetas en un ...
Globos que caen y se desvanecen en el blog Muchos bloggers buscan darle a su blog un aspecto diferente cuando este esta de aniversario,y aunque pueden haber muchos trucos en la red para darle u...

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>