JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<div id="product-image-gallery">
    <div id="product-image-holder" style="background-image: url('http://dummy-images.com/animals/dummy-480x270-Cat.jpg');">My Main Image</div>
    <ul>
        <li class="product-thumb">
            <img src="http://dummy-images.com/animals/dummy-480x270-Gull.jpg" />
        </li>
        <li class="product-thumb">
            <img src="http://dummy-images.com/animals/dummy-454x280-Cow.jpg" />
        </li>
    </ul>
</div>

CSS

#product-image-holder {
    display:block;
    width:300px;
    height:300px;
    background-size:100%;
    background-repeat:no-repeat;
    overflow:hidden;
    text-indent:-9999999px;
}
ul li.product-thumb {
    display:block;
    width:65px;
    height:65px;
}
ul li.product-thumb:hover {
    cursor:pointer;
    border:1px solid #000;
}
ul li.product-thumb img {
    display:block;
    max-width:100%;
}

JavaScript

$(function () {
    var $originalImage = $('#product-image-holder');
	var originalImageSrc = $originalImage.css('background-image');
    var containerSelector = '#product-image-gallery ul li.product-thumb';
    var $container = $(containerSelector);

    $container.on({ click: function () {
	        $('li.product-thumb.active').removeClass('active');
        
	        $(this).addClass('active');
    }, mouseenter: function () {
        var $imageChange = $(this).find('img');
	    var imageChangeSrc = 'url(\'' + $imageChange.attr('src') + '\')';
        
	    $originalImage.css('background-image', imageChangeSrc);
    }, mouseleave: function () {
        var $activeImage = $(containerSelector + '.active img');
	    var activeImageSrc = 'url(\'' + $activeImage.attr('src') + '\')';
        
	    if ($(this).hasClass('active')) {            
	    } else if ($activeImage.length > 0) {            
	        $originalImage.css('background-image', activeImageSrc);
	    } else {           
	        $originalImage.css('background-image', originalImageSrc); 
	    }
    }});
});