<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="parent"> <div class="myDiv"> <a href="#"> <img src="https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://pi.tedcdn.com/r/tedideas.files.wordpress.com/2017/05/featured_art_heal_forests.jpg?"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Bachalpsee_reflection.jpg/300px-Bachalpsee_reflection.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_cDEviqY.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP5gbBJlpb9xTj7CYBT-p4e-oqjniHdvwe8tnMG0Srr-SfbxZ5"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://www.nighthelper.com/wp-content/uploads/2016/03/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="http://daxushequ.com/data/out/88/img59800646.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://orig00.deviantart.net/334d/f/2016/156/d/6/aria_maleki___nature_brain_by_aria_maleki-da563qu.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="http://all4desktop.com/data_images/wallpapers/nature-and-landscape/483732.jpg"> </a> </div> <div class="myDiv"> <a href="#"> <img src="https://www.naturalnews.com/wp-content/uploads/sites/91/2017/06/Green-Lawn-Trees-Park-Under-Sunny.jpg"> </a> </div> </div>

.parent{ display: -webkit-inline-box; overflow: hidden; width:100%; } div.myDiv { width: 200px; height: 200px; margin: 41px 189px 79px -98px; border: 2px solid freen; float:left; overflow: hidden; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Safari */ transform: rotate(45deg); /* Standard syntax */ } div.myDiv:nth-child(even){ margin: -100px 39px 0px -248px; } .myDiv img{ width: 142%; height: 142%; display: inline-block; vertical-align: middle; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin: -41px; } .myDiv img:hover { opacity: 0.7; width : 200%; height: 200%; margin: -100px; }