Can I stack overlapping elements using pure CSS?

Question

Is it possible to place an unknown number of elements in a container so that it looks complex when this container is not large enough? I am trying to do this only with HTML and CSS.

Here's what it looks like if the parent size is larger than that of children.

Here is what I try to accomplish when more children are occupied by parents (fill in the color to show the stacking order):

Some things that I looked at but no luck (maybe I missed something or just not so good):

• CSS counter - only works for content property
• Nesting div children inside each other (e.g. Start)
• CSS flexbox - it only wraps or compresses

Here, collect what I'm trying to do: http://codepen.io/vickyleong/pen/VaPBYg . Try resizing the window.

NOTE Children are squares, but stacked with overlapping, for example, a cascade

I use Sass, but here is my code only with HTML and CSS:

 body, * { box-sizing: border-box; margin: 0; } .card { display: block; width: 100%; padding: 1rem; background-color: #FAFAFA; border: 1px solid #F4F4F4; box-shadow: 0px 1px 3px 1px #DDD; } .card-content { margin: 1rem; } .student-pic-sm { width: 100px; height: 100px; } .round-pic { background-color: #AAA; border-radius: 50%; } .batch-list-item .card-title h2 { margin: 1rem 0; } .batch-list-item .card-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; } .batch-list-item .student-pic-list { height: 100px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .batch-list-item .round-pic { box-sizing: border-box; display: inline-block; border: 3px solid #333; overflow: visible; } .batch-list-item .round-pic .round-pic { margin-left: 25%; margin-top: -3px; } .batch-list-item .round-pic:nth-child(2n) { background-color: #BBB; } .batch-list-item .round-pic:nth-child(3n) { background-color: #CCC; } .batch-list-item .space-filler { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .batch-list-item .students-count { -webkit-box-flex: 0; -webkit-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .batch-list-item .students-count p { font-size: 16pt; } .student-pic-list { position: relative; } .student-pic-list > div + div { position: absolute; left: 4%; } .student-pic-list > div + div + div { left: 8%; } .student-pic-list > div + div + div + div { left: 12%; } .student-pic-list > div + div + div + div + div { left: 16%; } .student-pic-list > div + div + div + div + div + div { left: 20%; } .student-pic-list > div + div + div + div + div + div + div { left: 24%; } .student-pic-list > div + div + div + div + div + div + div + div { left: 28%; } .student-pic-list > div + div + div + div + div + div + div + div + div { left: 32%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div { left: 36%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div { left: 40%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div { left: 44%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div { left: 48%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 52%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 56%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 60%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 64%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 68%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 72%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 76%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 80%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 84%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 88%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 92%; } .student-pic-list > div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div + div { left: 0%; z-index: -1; } 

 <div id="batch-1" class="batch-list-item card"> <div class="card-title"> <h2>Pending Batch</h2> </div> <div class="card-content"> <div class="student-pic-list"> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> <div class="round-pic student-pic-sm"> </div> </div> <div class="students-count"> <p>14 students</p> </div> </div> </div> 

Answer 1

negative fields except the first type:

 body { width: 100%; height: 100%; margin: 0px; background: lavender; } #container { display: -webkit-flex; /* Safari */ display: flex; outline: 1px solid hotpink; } .inner { height: 100px; width: 100px; margin-left: -50px; -webkit-transition: margin-left 0.3s ease; /* Safari */ transition: margin-left 0.3s ease; border: 2px dashed black; box-sizing: border-box; background-color: rgba(255, 0, 255, 0.2); } .inner:first-of-type, #container:hover .inner:first-of-type { margin-left: 0; } #container:hover .inner { margin-left: -30px; } img { width: 100px; height: 100px; } 

 <div id=container> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> <div class=inner><img src="http://i.imgur.com/ufh1gnC.png" alt=pic></div> </div>