3 Image layout - Center image larger and higher z-index - html

Question

I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
I feel like I may be close and will keep trying but any help will be great!
Thanks
Tom

Answer 1

Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Left image's left indent you can set by change left: attribute, and right image's right indent change right:

Answer 2

.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageCentre {
width: 100%;
z-index: 900;
}
.imageLeft {
position: relative;
left: 5%;
}
.imageRight {
position: relative;
right: 5%;
}
.imageCentre {
width: 100%;
}
as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/

Answer 3

nothing change in your code just add this css in your css code. if it's works answer me !
.imageBanner img {
border:solid 5px #000
}
.imageLeft {
text-align:right;
margin-right:-5px
}