Efecto Zoom con CSS3

Hoy lograremos llamar la atencion a nuestro visitantes al darle el efecto a nuestra galeria de imagenes,en este efecto lo realizaremos utilizando solo las propiedades que nos da CSS3.

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 */

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

Al hacer el evento  :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:<img class="zoom" src="foto.png" />

El ejemplo: