JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="container">
	<div class="slideshow">
		<div class="slide-content">
            <img src="http://lorempixel.com/300/200" alt=""/>
		</div>
		<ul class="slideshow-list clearfix">
			<li class="slideshow-item">
                <a class="slideshow-pic" href="#"><img src="http://lorempixel.com/300/200" alt=""/></a>
			</li>
			<li class="slideshow-item">
                <a class="slideshow-pic" href="#"><img src="http://lorempixel.com/300/200" alt=""/></a>
			</li>
			<li class="slideshow-item">
                <a class="slideshow-pic" href="#"><img src="http://lorempixel.com/300/200" alt=""/></a>
			</li>
			<li class="slideshow-item">
                <a class="slideshow-pic" href="#"><img src="http://lorempixel.com/300/200" alt=""/></a>
			</li>
		</ul>
	</div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

.container {
  width: 940px;
  margin: auto;
  background: #ccc;
  min-height: 1500px;
}
.container .slideshow {
  width: 600px;
  margin: 0 auto;
}
.container .slideshow .slide-content {
  position: relative;
  width: 600px;
  height: 400px;
  border: 1px solid #444;
}
.container .slideshow .slide-content img {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.container .slideshow ul .slideshow-item {
  float: left;
  margin: 25px;
}
.container .slideshow ul .slideshow-item a {
  display: block;
}
.container .slideshow ul .slideshow-item a img {
  width: 100px;
  height: 80px;
}

li {
    list-style: none;
}

JavaScript

$(document).ready(function() {
	$('.slideshow-pic').on('mouseenter', function(){
		
		var
			$this = $(this),
			item = $this.closest('.slideshow-item'),
			container = $this.closest('.slideshow'),
			content = container.find('.slide-content'),
			path = item.find('img').attr('src'),
			duration = 400;

		if (!item.hasClass('active')) {
			item.addClass('active').siblings().removeClass('active');

			content.find('img').fadeOut(duration, function() {
				$(this).attr('src', path).fadeIn(duration);
			});
		};

	});
});