Проблема в том, что у дочернего элемента не может быть z-index меньше, чем у родительского, как в твоем случае.
Реализовать можно по-разному, в зависимости от того, что и как еще ты там захочешь расположить. Как вариант, изменить так:
.block1 {
/* background: #323232; */
/* z-index: 10; */
}
.block1::after {
content: "";
position: relative;
display: block;
height: 100%;
background: #323232;
}
img {
/* z-index: 1; */
}
Обрати внимание, здесь не конечные стили, а только то, что следует добавить или убрать. Либо, если не хочется делать
::after, можно вместо него добавить после изображения элемент на верстку и прописать ему схожие стили.
Измененный пример:
https://codepen.io/anon/pen/BrdYJQ 
Простой
Средний