Flex box добавляет BG / IMG за IMG

Question

Я хочу добавить эффект внизу моего изображения.

Это можно сделать, создав фон или когда я пытаюсь добавить другое изображение позади.

Разметка

<div class="a">
  <div class="container">
    <h2>Title</h2>
    <img class="imgA1" src="http://placehold.it/200x200">
    <img class="imgB1" src="http://placehold.it/200x200/ff0000">
  </div>
</div>

CSS

 .container {display: flex; position:relative; justify-content: center;     align-items: center;}
 h2 {position:absolute; z-index: 2;}
 .imgA1 { position:absolute; top: 8px; left: 0px; } 
 .imgB1 { position:relative; bottom: 0px; left:  0px;} 

http://jsfiddle.net/62c8zxjh/

Фон будет иметь другой цвет и будет работать как тень для изображения.

Я хочу выровнятьH2, imgA1, imgA2 посередине соответственно.

Когда я получаю BG / IMG позади основного IMG, если я увеличиваю или тестирую ответно, это не работает.

Answer 1

Без изображения, показывающего желаемый результат, это скорее предположение, но вы это имеете в виду?

.container {
  position: relative;
}
.container img {
  width: 100%;
}
.imgA1 {
  position: absolute;
  top:8px;
}
.content-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
}

<div class="container">
  <img class="imgA1" src="http://placehold.it/200x200">
  <img class="imgB1" src="http://placehold.it/200x200/ff0000">
  <div class="content-container">
    <h2>
      Title
    </h2>
  </div>
</div>