<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 ----------> <div class="container"> <div class="square-outer"> <div class="main-image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"> </div> <div class="second-image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png"> </div> <div class="third-image"> <img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png"> </div> </div> </div>

.square-outer { position: relative; width: 100px; height: 100px; overflow: hidden; border-radius: 1px; padding: 15px; cursor: pointer; border: 4px solid skyblue; } .main-image { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } .main-image:hover, .second-image:hover, .third-image:hover { transform: scale(1.06); } .second-image { position: absolute; top: 0; right: 0; width: 50%; height: 50%; border-left: 2px solid #fff; } .third-image { position: absolute; bottom: 0; right: 0; width: 50%; height: 50%; border-left: 2px solid #fff; border-top: 2px solid #fff; }