<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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(); }); });