"map gallery"
Bootstrap 4.1.1 Snippet by autocad

<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='map map-1' style="background-image:url('https://api.mapbox.com/styles/v1/mapbox/light-v8/static/-74.2216934,-13.1627632,11/400x400@2x?access_token=pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2ltNnNxZWlkMDA2YXU0bHh1YTFneHl5aiJ9.I7VkcC6cW1tORuUcm3ii1A')"></div> <div class='map map-2' style="background-image:url('https://api.mapbox.com/styles/v1/mapbox/emerald-v8/static/-73.7633451,42.6523228,9/400x400@2x?access_token=pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2ltNnNxZWlkMDA2YXU0bHh1YTFneHl5aiJ9.I7VkcC6cW1tORuUcm3ii1A')"></div> <div class='map map-3' style="background-image:url('https://api.mapbox.com/styles/v1/mapbox/streets-v8/static/-122.4196283,37.7847294,11/400x400@2x?access_token=pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2ltNnNxZWlkMDA2YXU0bHh1YTFneHl5aiJ9.I7VkcC6cW1tORuUcm3ii1A')"></div> <div class='map map-4' style="background-image:url('https://api.mapbox.com/styles/v1/mapbox/dark-v8/static/77.5979909,12.9708532,10/400x400@2x?access_token=pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2ltNnNxZWlkMDA2YXU0bHh1YTFneHl5aiJ9.I7VkcC6cW1tORuUcm3ii1A')"></div> <div class='map map-5' style="background-image:url('https://api.mapbox.com/styles/v1/mapbox/bright-v8/static/-77.0354411,38.907272,12.5/400x400@2x?access_token=pk.eyJ1Ijoia2F0eWRlY29yYWgiLCJhIjoiY2ltNnNxZWlkMDA2YXU0bHh1YTFneHl5aiJ9.I7VkcC6cW1tORuUcm3ii1A')"></div> <div class='shelf'></div> </div>
html, body { width: 100%; height: 100%; } body { background: #132636; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .container { width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-perspective: 1000; perspective: 1000; position: relative; } .map { width: 200px; height: 300px; margin: 0 -25px; position: relative; box-shadow: 0px 0px 110px -5px rgba(0, 0, 0, 0.5); background-size: cover; background-position: center; border-radius: 5px; -webkit-transition: .2s; transition: .2s; cursor: pointer; } .map:hover { -webkit-transition: .2s; transition: .2s; -webkit-transform: translateZ(5px) translateY(-20px) scale(1.05); transform: translateZ(5px) translateY(-20px) scale(1.05); } .map-1, .map-4 { -webkit-transform: translateZ(1px); transform: translateZ(1px); } .map-2, .map-5 { -webkit-transform: translateZ(2px) translateY(-5px); transform: translateZ(2px) translateY(-5px); } .map-3 { -webkit-transform: translateZ(3px) translateY(-10px); transform: translateZ(3px) translateY(-10px); } .map-1:hover ~ .map-2 { -webkit-transform: translateZ(4px) translateY(-15px); transform: translateZ(4px) translateY(-15px); -webkit-transition: .2s; transition: .2s; } .map-4 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .map-4:hover ~ .map-5 { -webkit-transform: translateZ(3px) translateY(-15px); transform: translateZ(3px) translateY(-15px); -webkit-transition: .1s; transition: .1s; } .shelf { background: #132636; height: 100px; width: 100%; position: absolute; bottom: -75px; left: 0; -webkit-transform: translateZ(10px); transform: translateZ(10px); }

Related: See More


Questions / Comments: