Galerie mit z-index

Hi Leute,
Ich hab für meine Website eine Idee für eine Galerie aber irgendwas hakt da noch.
Hier zwei Bilder…
[ATTACH]2606.vB[/ATTACH]
[ATTACH]2607.vB[/ATTACH]
Das Bild soll sich beim hovern vergrößern und die anderen bedecken.
Das hab ich bis jetzt an Code

#gallery img{ width: 250px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #gallery img:hover { width: 800px; text-align:center; z-index:2; } #photos{ width: 800px; margin: 0 auto; background-color:#FFFFFF; }
Und das an HTML

[CODE]









                     <td><a href=Lukas.html><img src="Pictures/1. Gitarre.jpg" title="Name"></a></td>
                     <td><a href=Linus.html><img src="Pictures/2. Gitarre.png" title="Name"></a></td>
                     <td><a href=Samuel.html><img src="Pictures/Bass.png" title="Name"></a></td>
              </tr>
    </div>     
  </div>[/CODE]

Weiß jemand woran es liegt?
Vielen Dank im Voraus…

Kommt schon Leute :smiley:

Kannst ja mal hier Gucken. Vielleicht hilft es dir weiter.
Vorschaubilder mit CSS vergößern (Zoomen)
Oder das (Experimentell).
Test Galerie ohne Java Script