I am trying to create a pop up for images so that they show a larger version.

I have created 1 that works but on the 2nd it doesn't work at all. I can't see the error.

The html code is;
HTML Code:
<div id="img-box">
 <a href="#img-wrapper">
          <img src="http://what-do-christians-believe.co.uk/wdcb-images/web-pen-chick-sm.png" alt="Photo: inside a tulip" title="inside of a tulip" > 
<div class="closed"></a>
 <p>click on photo to close</p>
 </div> 
  
<div id="img-box-2">
<a href="#img-wrapper-2">
   <img src="http://what-do-christians-believe.co.uk/wdcb-images/web-fire-sm.png" alt="Photo: Common seal" title="Common Seal">
<div class="closed"></a>
 <p>click on photo to close</p>
     </div>
 </div>
     </div>
The css code is:

Code:
#img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    opacity: 120;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    z-index: 100;
}

#img-box:target {opacity: 1; width: 100%; height: 100%;}

#img-box img {
    width: 300px;
    height: 400px;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -150px 0 0 -225px;
    z-index: 100;
} 

#img-wrapper {
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

#img-wrapper:target {
    width: 0px;
    height: 0px;
    overflow: hidden;
   }


#img-box-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    opacity: 120;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
    z-index: 100;
}

#img-box-2:target {opacity: 1; width: 100%; height: 100%;}

#img-box-2 img {
    width: 400px;
    height: 250px;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -225px;
    z-index: 100;
} 

#img-wrapper-2 {
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

#img-wrapper-2:target {
    width: 0px;
    height: 0px;
    overflow: hidden;
   }
The website is here
I've got the code from a tutorial and have tried to adapt it. ;(
How can I fix it so that the pop up works?