<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);
});
});
This Pen doesn't use any external CSS resources.