I'm looking to create a page with a number of images on it (let's say 20 for now). These are actually thumbnails that when clicked on will open up colorbox (I solved the thumbnail query that was in another thread). I want them to be in the centre of the page and to form a square. I would like to create a small border around each image (to form a large window effect) but the problem I'm finding is that the border around the image is 'active' - as in, when I hover over empty space it's actually hovering over part of the image. Is there a way to get around this? Also, is it possible to create a hover effect on the images that when hovered over the opacity changes slightly?

At the moment the code looks like this:

HTML

Code:
<div id = "imgsquare">
<a href="img1.jpg" class="colorbox" rel="group1"><img src="thumb1.jpg" ></a>
<a href="img2.jpg" class="colorbox js-hide" rel="group1"></a>
<a href="img3.jpg" class="colorbox js-hide" rel="group1"></a>
<a href="img4.jpg" class="colorbox js-hide" rel="group1"></a>
<a href="img5.jpg" class="colorbox1" rel="group2"><img src="thumb5.jpg" ></a>
<a href="img6.jpg" class="colorbox1 js-hide" rel="group2"></a>
<a href="img7.jpg" class="colorbox1 js-hide" rel="group2"></a>
<a href="img8.jpg" class="colorbox1 js-hide" rel="group2"></a>
<a href="img9.jpg" class="colorbox2" rel="group3"><img src="thumb9.jpg" ></a>
<a href="img10.jpg" class="colorbox2 js-hide" rel="group3"></a>
<a href="img11.jpg" class="colorbox2 js-hide" rel="group3"></a>
<a href="img12.jpg" class="colorbox2 js-hide" rel="group3"></a>

CSS

Code:
#imgsquare {
	width:250px;
	height:auto;
	margin: 350px auto;
	text-align:center;
	}
 
#imgsquare img {
	float:left;
	border-style:none;
	text-align:center;
}