<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);
}
