Efecto zoom en una imagen y texto al pasar el ratón por encima

Este código muestra como generar un efecto de zoom sobre una imagen y texto al pasar el ratón por encima.
Para insertarlo en una entrada Html copiar el siguiente código

<div style="text-align: center;">
<div class="zoom">Texto  </div>
  <img class="zoom" src="Url de la imagen" />
</div>
<style type="text/css">
    .zoom{
        /* Aumentamos el ancho y la altura durante 1 segundo */
        transition: width 1s, height 1s, transform 1s;
        -moz-transition: width 1s, height 1s, -moz-transform 1s;
        -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
        -o-transition: width 1s, height 1s,-o-transform 1s;    
    }
    .zoom:hover{
        /* tranformamos  su tamaño al pasar el mouse por encima con scale(2.5). */
        transform : scale(2.5);
        -moz-transform : scale(2.5);      /* Firefox */
        -webkit-transform : scale(2.5);   /* Chrome - Safari */
        -o-transform : scale(2.5);        /* Opera */
  }

Resultado Efecto zoom en una imagen y texto al pasar el ratón por encima

Escalones

→ cambiar los datos que están en rojo
 • Se puede insertar en un Gadget HTML/Javascript