Problema con onmouseover y getElementById

Hola,

a ver si alguien puede ayudarme...

Tengo que hacer que al pasar el raton por encima de un div, la imagen que incluye el div haga un efecto de zoom. El problema es que todas las imagenes de la página tienen la id "producto", o sea que tendría que decirle de alguna manera que el onmouseover sólo afecte a la imagen que contiene ese div.

Además, no puedo utilizar clases.

He probado lo siguiente, pero no funciona:


---------

<div onmouseover="this.getElementById('producto').style .transform='scale(1.5)';
this.getElementById('producto').style.transition=' 0.2s ease-in'; "

onmouseout="this.getElementById('producto').style. transform='scale(1)';
this.getElementById('producto').style.transition=' 0.2s ease-out'; " >

---------


Si alguien me puede ayudar estaré muy agradecido.

Gracias.

YA que te diste cuenta de tu error principal, te dire otro.

Repetir "id" es un error de novato, así que recuerda, si ya tienes un "ID" producto, ya no deberías tener otro.

En fin, esta sería la manera correcta de hacerlo:

Aquí el demo: http://jsfiddle.net/elporfirio/rb8dqr4v/

y Aquí el código para que sepas como implementarlo:

https://gist.github.com/elporfirio/86b2b0fcdf2a428d91c6