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.

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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

Deja un comentario

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