Problem mit Div-Overlays

[Hellboy]

Hallo zusammen,

ich bastel an meiner Porfolioseite und bin auch schon relativ weit gekommen,
nun hakt es aber leider, und ich komm mit meinen begrenzten Kenntnissen nicht weiter.

Die Website soll folgendermaßen aussehen: Man hat verschiedene Bilder, klickt
man auf ein Bild öffnet sich ein durchsichtiges Div, das den Hintergrund überlagert und
weitere Details (Text und Bilder) zeigt; klickt man wieder, schließt sich das Div.
Die Java-Funktion dazu sieht folgendermaßen aus:

  
<script>  
$(function()  
{  
    $('.masonryImage').click(function()  
    {  
        $('.hiddenDiv').show();  
        $("body").css("overflow", "hidden");  
    });  
    $('.hiddenDiv').click(function()  
    {  
        $('.hiddenDiv').hide();  
        $("body").css("overflow", "auto");  
    });  
});  
</script  

HTML zu den Bildern:

  
<div class="masonryImage">  
        <img src="images/bild1.jpg" alt="">  
</div>  
<div class="hiddenDiv">  
     <div class="text">  
         <p>Lorem ipsum...</p>  
     </div>  
     <div class="bilder">  
         <img src="images/bild2.jpg" alt="">  
      </div>  
</div>  

Problem: Es funktioniert nur mit einem einzigen Bild, füge ich ein weiteres hinzu, zB:

  
<div class="masonryImage">  
        <img src="images/bild3.jpg" alt="">  
</div>  
<div class="hiddenDiv">  
     <div class="text">  
         <p>Lorem ipsum und so...</p>  
     </div>  
     <div class="bilder">  
         <img src="images/bild4.jpg" alt="">  
      </div>  
</div>  

So überlagert dessen Text nun den Ersten, und es werden auch nur noch die Bilder dieses Divs
angezeigt.
Liegt es daran das Alle die gleiche Klasse haben ("masonryImage")?. Oder enfernt das Java, die Divs nicht korrekt?

Vielen Dank für eure Hilfe.