You can simply hide the other ones.
<style>
/* straight outta boilerplate h5bp.com */
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
border: 0; clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden; padding: 0;
position: absolute; width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
</style>
<div class="belmont" style="margin-left:30px; margin-top:30px;">
<a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
<img src="images/Belmont4portfoliohover.png" width="163" height="160">
</a>
<a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
<img src="images/Belmont4portfoliohover.png" width="163" height="160">
</a>
<a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
<img src="images/Belmont4portfoliohover.png" width="163" height="160">
</a>
</div>