JSFiddle - React, Tailwind, and code Playground

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

var $originalImage = $('#product-image-holder');
	var $originalImageSrc = $originalImage.css('background-image');
	
	$('#product-image-gallery ul li.product-thumb').click(function () {
	    $('li.product-thumb.active').removeClass('active');
	    $(this).addClass('active');
	});

	$('#product-image-gallery ul li.product-thumb').hover(
    //mouseenter event
        function () {
            var $imageChange = $(this).find('img');
            var $imageChangeSrc = 'url(\'' + $imageChange.attr('src') + '\')';
            $originalImage.css("background-image", $imageChangeSrc);
	},
    //mouseleave event
    function () {
        var $activeImage = $('#product-image-gallery ul li.product-thumb.active img');
        var $activeImageSrc = 'url(\'' + $activeImage.attr('src') + '\')';

        if($(this).hasClass('active')){
            
        }
        else if ($activeImage != '') {
            $originalImage.css("background-image", $activeImageSrc);
        }
        else {
            $originalImage.css("background-image", $originalImageSrc);
        }
    });