JSFiddle - React, Tailwind, and code Playground
HTML
<div class="preview">
<img src="http://placehold.it/400x220">
</div>
<div class="thumbs">
<img src="http://clouddragon.files.wordpress.com/2009/07/blog-k3.jpg" rel="http://clouddragon.files.wordpress.com/2009/07/blog-k3.jpg" class="zoom" />
<img src="http://www.dailypets.co.uk/wp-content/uploads/2007/06/kittens-cups.jpg" rel="http://www.dailypets.co.uk/wp-content/uploads/2007/06/kittens-cups.jpg" class="zoom" />
</div>
CSS
img {
width: 33%;
height: auto;
}
.preview {
width: 400px;
overflow: hidden;
}
.preview img {
width: 100%;
height: auto;
}
JavaScript
$(function(){
$("img.zoom").mouseover(
function(){
$(".preview").html( $("<img>").attr("src", $(this).attr("rel")) );
}
);
});