The issue is that Google only sees one ALT tag therefore the other image is without description and will not rank in image search results.
If using a lightbox then preferably you should code or use one that supports HTML5 data- e.g:*
<div class="thumb">
<img src="example.jpg" data-src="example-thumbnail.jpg" alt="example">
</div>
If you are using only CSS and HTML then you COULD use one of 3 methods that I can think of:
Method 1: Scrap the thumbnails and resize the larger image down to thumb size:
<!-- HTML -->
<div class="thumbnail">
<img src="example.jpg" alt="example">
</div>
/* CSS */
.thumbnail img {
max-width: 200px;
}
.thumbnail img:hover {
max-width: 100%;
}
You could even spice this up by using a Pure CSS lightbox
Method 2: Link to a valid page rather than a image:
<!-- Embedded Small -->
<a href="/path/to/example.html" title="View Image Full Size">
<img src="example.jpg" alt="thumbnail of example">
</a>
Method 3: Show and Hide:
<!-- Both Images -->
<div class="thumbnail">
<img src="example.jpg" alt="example">
<img src="example-thumbnail.jpg" alt="example thumbnail">
</div>
/* CSS */
.thumbnail img:first-child {
max-width: 200px;
}
.thumbnail img:last-child {
max-width: 100%;
display: none;
}
.thumbnail:hover img:first-child {
display: none;
}
.thumbnail:hover img:last-child {
display: block;
}
