¿Te ha sucedido alguna vez que estando en una web, al pasar el mouse sobre una imagen ésta se agranda y sobresale? Es un efecto muy bonito, porque logra su objetivo, que enfoques tu atención en ese elemento.

Hoy haremos ese efecto utilizando solo las propiedades que nos da CSS3:

<style type="text/css">
    .zoom {
        transition: 1.5s ease;
        -moz-transition: 1.5s ease; /* Firefox */
        -webkit-transition: 1.5s ease; /* Chrome - Safari */
        -o-transition: 1.5s ease; /* Opera */
    }
    .zoom:hover {
        transform: scale(2);
        -moz-transform: scale(2); /* Firefox */
        -webkit-transform: scale(2); /* Chrome - Safari */
        -o-transform: scale(2); /* Opera */
        -ms-transform: scale(2); /* IE9 */
    }
</style> 

Nuestros elementos .zoom, tendran una animación al hacer el efecto de 1.5 segundos, con el efecto ease (por defecto), el cual empieza lento, aumenta de velocidad, y al final vuelve a ser lento.

IE9 no soporta transition, sim embargo sí soporta transform, con lo cual se duplica el tamaño de los elementos, pero sin de manera progresiva.

Al hacer :hover (pasar el puntero del mouse sobre el elemento), se activará el efecto y, haciendo uso de scale(2) especificamos que crecerá al doble(2) de su tamaño normal.

Para el ejemplo, nuestro HTML:

<div class="zoom">Efecto de zoom con CSS3</div>
<img class="zoom" src="imagen.png" /> 

El texto y la imagen tendrán el efecto de zoom, porque en ambos aplicamos la class css .zoom.

A continuación unos ejemplo (passa el ratón por encima):