How to make a responsive stack of images within bootstrap grids - html

Question

I'm creating a small website as a home project to show off my artworks. At the main page I want to show recently updated collections with the latest works stacked like a stack of cards with a small offset. Each stack gets its own grid column.
This is what I have so far: http://www.bootply.com/Dus21AApn5
<div class="container-flow">
<h2> Recent Collection Updates</h2>
<div class="row" style="margin: 0.05%;">
<div class="col-sm-4 col-xs-6">
<div style="position: absolute;
max-height: 200px;
margin: auto;
overflow: hidden;
top: 0px;
left: 0px;
z-index: -0;
-webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);">
<img style="max-width: 200px;" class="img-responsive" src="http://placehold.it/250x350">
</div>
...
</div>
<div class="col-sm-4 col-xs-6"> ... </div>
<div class="col-sm-4 col-xs-6"> ... </div>
</div>
</div>
The code is a bit messy because it's generated by a template engine (I'll move all the styles to CSS-files later).
I got it to work so it looks like the images are stacked on each other but unfortunately at the same time it broke the responsiveness of the bootstrap grid. The grid columns don't stack anymore and just merge into each other. I figured out it's due to the position of the div, which contains the images, being set to absolute. I can't find a way to keep my image stack and at the same time the responsiveness.
I searched the internet for a while but didn't find a solution. Since I'm not a Web-(Front-End)-Developer I have very little experience with HTML/CSS and the like.
If someone could give me a solution or point me in the right direction so I can fix it myself, that would be nice.
I'd like to avoid additional JavaScript wherever possible.

Answer 1

Here is a solution, but due to all divs inside bootstrap grid cell (col-*...) are absolutely positioned, they forced to get their height by jquery script to avoid overlapping.
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: 40vw;
}
#media screen and (max-width: 767px) {
.imgBanner {
height: 30vw;
}
}
.image1 {
left: 0;
top: 0;
z-index: -1;
}
.image2 {
top: 0;
left: 10%;
z-index: -2;
}
.image3 {
top: 0;
left: 20%;
z-index: -3;
}
.imageBanner div {
width: 75%;
max-height: 85%;
display: block;
position: absolute;
overflow: hidden;
-webkit-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
box-shadow: 2px 2px 1px 3px rgba(0,0,0,0.2);
}
.imageBanner div img {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-flow">
<h2 class=""> Recent Collection Updates</h2>
<div class="row" style="margin: 0.05%;">
<div class="col-sm-4 col-xs-6">
<div class="imageBanner">
<div class="image1">
<img src="https://unsplash.it/600/400/" class="img-responsive">
</div>
<div class="image2">
<img src="https://unsplash.it/400/600/" class="img-responsive">
</div>
<div class="image3">
<img src="https://unsplash.it/500/500/" class="img-responsive">
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="imageBanner">
<div class="image1">
<img src="https://unsplash.it/800/600/" class="img-responsive">
</div>
<div class="image2">
<img src="https://unsplash.it/200/200/" class="img-responsive">
</div>
<div class="image3">
<img src="https://unsplash.it/600/800/" class="img-responsive">
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-sm-4 col-xs-6">
<div class="imageBanner">
<div class="image1">
<img src="https://unsplash.it/300/400/" class="">
</div>
<div class="image2">
<img src="https://unsplash.it/600/600/" class="">
</div>
<div class="image3">
<img src="https://unsplash.it/400/200/" class="">
</div>
</div>
</div>
</div>
</div>
Also you can view another variant of images interposition here: https://stackoverflow.com/a/41048391/4206079