JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="gallery">
    <div class="preview"></div>
    <div class="thumbrow">
        <div class="thumb active" 
            data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/3/6/1/1/1002004012261163.jpg" 
            data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/3/6/1/1/1002004012261163.jpg">
        </div>
        
        <div class="thumb"
            data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/8/7/9/6/1002004012166978.jpg"
            data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/8/7/9/6/1002004012166978.jpg">
        </div>
        
        <div class="thumb"
            data-thumbsmall="http://s.s-bol.com/imgbase0/imagebase/thumb/FC/7/2/0/5/1002004006245027.jpg"
            data-thumbbig="http://s.s-bol.com/imgbase0/imagebase/regular/FC/7/2/0/5/1002004006245027.jpg">
        </div>
    </div>
</div>

CSS

.preview{
    width: 165px;
    height: 210px;
    border:1px solid #ccc;
    margin:15px;
}
.thumb{
    width: 120px;
    height: 155px;
    position:relative;
    float:left;
    border:1px solid #ccc;
    margin:15px;
}

JavaScript

(function($){ //closure
    $(function() { //dom ready

        var $gallery = $('div.gallery'); 
        var $preview = $gallery.find('div.preview');
        var $thumbrow = $gallery.find('div.thumbrow');
        var $thumb = $thumbrow.children('div.thumb');
        var bigThumb =  $gallery.find('.thumb.active').attr('data-thumbbig');
       
        $thumb.each(function(i){
            var thumbsmall = $(this).attr('data-thumbsmall');
            $(this).css({'background':'url("'+thumbsmall+'")','backgroundRepeat':'no-repeat'});
        });
        $preview.css({'background':'url("'+bigThumb+'")','backgroundRepeat':'no-repeat'});

        $thumb.hover(function(event){
            var bigThumb = $(this).attr('data-thumbbig');
            $preview.css({'background':'url("'+bigThumb+'")','backgroundRepeat':'no-repeat'});                
        });        
       
    });        
})(jQuery);