Overlapped, multiple images in a responsive container - html

Question

I have a responsive container and one image within it. It works good. The container and the image are resizing when the window-size changes. But, I need not only one, but more images which exactly overlap each other (all of them have the same size). How can I achieve this with HTML and CSS?
.pageCenter {
display: block;
max-width: 980px;
margin: 0 auto;
width: auto;
float: none;
border: 5px solid red;
}
.imageContainer img {
display: block;
margin: 0 auto;
width: auto;
}
img {
position: relative;
}
<div class="pageCenter">
<div class="imageContainer">
<img src="https://placeimg.com/400/200/nature" style="width:100%;" />
</div>
</div>

Answer 1

You could use grid in order to specify what row and column you want all images to sit in. They will then overlap and adjust to your container (do note the images I am using are all the same picture, but if you inspect, the 3 images are on-top of eachother:
.pageCenter {
display: block;
max-width: 980px;
margin: 0 auto;
width: auto;
float: none;
border: 5px solid red;
}
.imageContainer{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
margin: 0 auto;
width: auto;
}
img {
position: relative;
grid-row: 1;
grid-column: 1;
}
<div class="pageCenter">
<div class="imageContainer">
<img src="http://www.fillmurray.com/800/400" style="width:100%;" />
<img src="http://www.fillmurray.com/800/400" style="width:100%;" />
<img src="http://www.fillmurray.com/800/400" style="width:100%;" />
</div>
</div>
Also note that grid isn't supported by all old browser

Answer 2

.imageContainer {
position:relative;
}
.imageContainer .img-1 {
position:absolute;
top:0;
left:0;
}
.imageContainer .img-2 {
float:left;
}
.clearfix {
clear:both;
}
<div class="pageCenter">
<div class="imageContainer">
<img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
<img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
<img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-1" />
<img src="https://wow.olympus.eu/webfile/img/1632/x=1024/oly_testwow_stage.jpg" class="img-2" />
<div class="clearfix"></div>
</div>
</div>
You need to set the parent to position:relative; and the images (.child) to position:absolute;
Updated with images, they overlap.
Updated again with your code.
Update #3: You need to set one image to position:absolute and one to float and add a clearfix element.