Как починить анимацию бэкграунда внутри div?

Question

[Fargoth]

Не работает смена фонового изображения внутри div. Причем именно в конкретном div'е. Если уменьшить width и height, то работает. В чем может быть дело?

.bgpic {
	background-image:url(2.png);
		background-repeat: no-repeat;
		box-shadow: black 1px 1px 1px;
		height: 55em;
	width: 100%;
	background-size: cover;
}
.bgpic:after {
	  content: '';
  height: 55em;
  transition: opacity .5s ease-in;
  position: absolute;
  left: 0; top: 0;
  background:url(4.jpg);
  animation: foo 10s infinite;
}
@keyframes bgpic {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

Answer 1

[Евгений]

https://jsfiddle.net/e87axpzb/9/

Comments

[Fargoth]

получилось, но теперь этот блок очень странно перекрывает меню и оно становится некликабельным. z-index не помогает почему-то https://codepen.io/Fargoth/pen/XBgqme и не только меню. div-подложку тоже.

[Евгений]

Fargoth, position:relative у .menu

[Fargoth]

Евгений, о, работает, спасибо! Кстати, не подскажете, как несколько картинок добавить и замедлить интервал?

[Евгений]

что значит несколько картинок?

[Fargoth]

Евгений, здесь одна сменяет другую и их две. вот вместо "две" можно как-то, например, четыре сделать?

[Евгений]

Fargoth, дополнительные блоки вводить

[Fargoth]

Евгений, но тогда надо интервалы времени строго соблюдать в таком случае.