<title>JQuery Image Gallery</title>

	<center><h2>JQuery Image Gallery</h2></center>

<div id="group">
	<div class="pic"><img src="https://wallpapercave.com/wp/pobP3XN.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/FVzS3zs.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/hi8QqOs.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2844582.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2557977.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2565119.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2565124.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2565122.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2565112.jpg" class="img"></div>
	<div class="pic"><img src="https://wallpapercave.com/wp/wp2565108.jpg" class="img"></div>
</div>

<div id="result">
	<div class="pic"><img src="https://wallpapercave.com/wp/pobP3XN.jpg" class="img"></div>
</div>
#group {
	width: 30%;
	height: 500px;
	float: left;
	margin: 10px;
	background-color: grey;
}

#result {
	width: 65%;
	height: 500px;
	background-color: grey;
	margin: 10px;
	float: left;
}

.img {
	width: 110px;
	height: 100px;
	float: left;
	margin: 10px;
	border: 1px solid white;
}

#result img{
	width: 97%;
	height: 480px;
}
$(document).ready(function(){
			$('.pic').click(function(){
				$(this).clone().appendTo('#result');
				$('#result').children().prev().remove();
				$('#result').children().children().attr({'class': 'result img'}).fadeIn();
			});
		});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js