<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();
});
});
This Pen doesn't use any external CSS resources.