IMPORTANT NOTE: This style and the resultant HTML will not produce the enlarged image on tablets or smartphones since they do not have the hover feature. A work-around for this problem that will be effective on both PCs and tablets may be of interest.
Change sizes and distances from top and left to suit your needs. The second image is here only to demonstrate that the selectors are able to select a single image out of all the images and to make the style statement apply to that one image. Below is the style section of this html file.
a img {width: 70px; height: 70px;}
#photo1 a img {width: 50px; height: 50px;}
#photo1 a:hover img {position: fixed; top: 50px; left: 50px; width: 300px; height: 300px;"}
The HTML to produce the images is:
<div id= "photo1">
<a href= " "><img src= "schoolhouse.jpg" width= "50px"></a>
</div>
<p style= "position: fixed; left: 10px; top: 100px;"><a href= " "><img src= "schoolhouse.jpg" width= "50px"></a>