Imagenes tipo google!

[polpolpol]

Hola amigos del foro!!

Tengo una duda sobre como poder hacer el efecto de las imagenes que aparecen en google cuando haces una busqueda de imagenes...

Cuando pones el mouse sobre una imagen se hace mas grande y aparece info..

Estube buscando en el codigo fuente pero no encontre nada se como hacer la imagen mas grande.

y me gustaria algo asi!!

Código HTML:

<div id="todo">
   <div id="imagen">
          <a href="ruta.php"><img scr="imagen.jpg" style="width:150px;"></a>
   </div>
   <div id="info" style="dysplay:none">
               <p>Esta imagen es de .... </p>
   </div>
</div>
 

y con el mouse encima de la imagen

Código HTML:

<div id="todo">
   <div id="imagen">
          <a href="ruta.php"><img scr="imagen.jpg" style="width:220px;"></a>
   </div>
   <div id="info" style="">
               <p>Esta imagen es de .... </p>
   </div>
</div>
 

Si alguien me pudiera aconsejar como hacer esto y sin deformar el contenido de la pagina al cambiar de tamaño la imagen, o hacer algo diferente que funcione igual!!


Desde ahora gracias por la atencion al mensaje y las indicaciones!!

[srgio1112]

Hazlo con JavaScript:

Código HTML:

<div id="todo">
<div id="imagen">
    <a href="ruta.php"><img scr="imagen.jpg" style="width:150px;" onmouseover="this.width='220'" onmouseout="this.width='150'"></a>
  </div>
  <div id="info" style="dysplay:none">
    <p>Esta imagen es de .... </p>
  </div>
</div>
 

Y ya está. Con este código debe funcionar bien.