JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<script src="http://www.agfx.com.au/js/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="displayed-images"> 
<img id="1" class="h-image" width="100%" height="auto" src="images/nothing.png" /> 
<img id="2" class="h-image" width="100%" height="auto" src="images/nothing.png" />
<img id="3" class="h-image"  width="100%" height="auto" src="images/nothing.png" /> 
  </div>
  
<div class="thumb-wrapper">
  <div class="thumbnails"> 
  <img src="https://dummyimage.com/300x200/000/fff&text=Image+1" data-large="1" title="Urban Wedge" /> 
  <img src="https://dummyimage.com/300x200/000/fff&text=Image+2" data-large="2" title="Cararo" /> 
  <img src="https://dummyimage.com/300x200/000/fff&text=Image+3" data-large="3" title="Classico " />
</div>

CSS

/*----------------------------------------thumbnail-hover-------------------------------------------------*/
 
 .displayed-images{	position:absolute ;
	left:10%;
	top:0px;
	width: 60%;
	height: 60%;
	overflow:hidden;
		pointer-events:none; }
	
	.h-image {
	position: absolute;
	top: 0px;
	pointer-events:none; 
}
.thumb-wrapper {
	position: absolute;
	left: 9%;
	bottom: 6%;
	width: 100%;
	height: 18%;
}
.thumb-wrapper h3{
		font-size: 20px;
		color:#038061;
 font-family: 'LatoWebLight';
 padding-bottom:1%;
	}
.feature-wrapper {
	position: relative;
	float: left;
	margin-left: 10%;
	width: 30%;
	height: 100%;
}

.thumbnails img {
	height: auto;
	width: 7%;
	float: left;
	cursor: pointer;
	opacity: 0.8;
}
.thumbnails img:hover {
	opacity: 1.0;
}

JavaScript

$( document ).ready(function() {
	
$(".thumbnails").on("mouseover ", "img", function () {
    $('#' + $(this).attr('data-large'))
     .attr('src', $(this).attr('src'))
     .stop().css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});
	 
});

$(".thumbnails").on("mouseout ", "img", function () {   
     $('#' + $(this).attr('data-large')).stop().css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0});
});
});