<img src="https://jonathonleathers.com/images/germany-src.jpg" 
     srcset="https://jonathonleathers.com/images/germany-1x.jpg 1x, 
             https://jonathonleathers.com/images/germany-2x.jpg 2x"
     alt="Germany"
     id="photo-full">

<div class="thumbs">
  <img src="https://jonathonleathers.com/images/germany-src-thumb.jpg"
       srcset="https://jonathonleathers.com/images/germany-1x-thumb.jpg 1x,
               https://jonathonleathers.com/images/germany-2x-thumb.jpg 2x"
       alt="Germany"
       data-full-src="https://jonathonleathers.com/images/germany-src.jpg"
       data-full-srcset="https://jonathonleathers.com/images/germany-1x.jpg 1x,
               https://jonathonleathers.com/images/germany-2x.jpg 2x">
  <img src="https://jonathonleathers.com/images/hawaii-src-thumb.jpg"
       srcset="https://jonathonleathers.com/images/hawaii-1x-thumb.jpg 1x,
               https://jonathonleathers.com/images/hawaii-2x-thumb.jpg 2x"
       alt="Hawaii"
       data-full-src="https://jonathonleathers.com/images/hawaii-src.jpg"
       data-full-srcset="https://jonathonleathers.com/images/hawaii-1x.jpg 1x,
               https://jonathonleathers.com/images/hawaii-2x.jpg 2x">
</div>
.thumbs img {
  width: 100px;
}
.full-image {
  width: 400px;
  height: 300px;
  margin-bottom: 10px;
}
jQuery(document).ready(function($) {
  $('.thumbs img').hover(function() {
    var $src = $(this).attr('data-full-src');
    var $srcset = $(this).attr('data-full-srcset');
    var $alt = $(this).attr('alt');
    $('#photo-full').attr('src', $src);
    $('#photo-full').attr('srcset', $srcset);
    $('#photo-full').attr('alt', $alt);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js