wolfgang1983 wolfgang1983 - 11 days ago 10
CSS Question

Stacking some images

On my code I am trying to be able to stack images like

enter image description here

Where there are 2 images behind and one on top.

I have tried using floats and z-index


Question how can I get it so my images are like in the above example?


WORKING DEMO <-- Updated with working solution

<div class="container">
<div class="row">

<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>

</div>
</div>


CSS

.img-1 {
z-index: 2;
float: none;
clear: both;
}

.img-2 {
float: left;
z-index: 1;
}

.img-3 {
float: right;
z-index: 1;
}

Answer

Here's another solution:

.img-1 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
   z-index: -1;
}

.img-2 {
  display: block;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: -1;
}

.img-3 {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<div class="container">
<div class="row">

<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>

</div>
</div>