Haz zoom a cualquier elemento con CSS3

Este es uno de los trucos más interesantes que he utilizado sobre CSS3 desde hace tiempo, y es que nos permite hacer un zoom muy sencillo de cualquier elemento únicamente utilizando CSS3, y lo haremos de esta manera:

Primero sobre el elemento a ampliar pondremos estas propiedades para asegurarnos que la transformación es fluida y no de golpe:

.divPrueba{-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;}
Y posteriormente añadimos la transición cuando nos ponemos encima del elemento.

.divPrueba:hover{-moz-transform: scale(2); -webkit-transform: scale(2);-o-transform: scale(2);}

Con eso lograremos que el elemento sobre el que hacemos hover aumente su tamaño por dos cuando estamos encima suyo.

Para finalizar os recuerdo que esto únicamente funciona en navegadores actualizados como Safari 4 y 5, Firefox 3.6+ y Chrome.

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

Categorías

CSS, HTML

Carlos Sánchez

Una de mis pasiones es el diseño, y de hecho trabajo como diseñador de interfaces para aplicaciones de iOS, además de hacer de vez en cuando... Ver perfil ›

2 comentarios

  1.   Merlyn Moreno dijo

    Saludos:

    Seria bueno mostrar un ejemplo o demostración de lo anteriormente descrito.

    Gracias por compartir el conocimiento.

    Que tengas buen día.

    Merlyn Moreno
    Dynamic Wizards .com

  2.   nicolas dijo

    falta un ejemplo o un demo

Escribe un comentario