Galerie mit z-index

[widna]

Hi Leute,
Ich hab für meine Website eine Idee für eine Galerie aber irgendwas hakt da noch.
Hier zwei Bilder...


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

      <div id="photos">        
        <div id="gallery">
                 <table>
                   <tr>
                         <td><a href=Vanessa.html><img src="Pictures/Mikrofon.jpg" title="Name"></a></td>
                         <td><a href=Tristan.html><img src="Pictures/Klavier.png" title="Name"></a></td>
                         <td><a href=Andreas.html><img src="Pictures/Schlagzeug.png" title="Name"></a></td>
                   </tr>
                   <tr>      
                         
                         <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>

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

 

[widna]

Kommt schon Leute

 

[djheke]

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