JSFiddle - React, Tailwind, and code Playground

by viphalongpro

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

var view = function(e){
    $(".preview").html( $("<img>").attr("src", $(e.target).attr("rel")) );
};

$("img.zoom").mouseover(view);
view({target: $("img.zoom")[0]});