.hero {
  height: 400px;
}

.hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
}

.hero img の height: 400px; の所なのですが、 position が入ると heigth:100%; では上の
親要素の

.hero {
  height: 400px; 
}

の高さ 400px は継承されないのでしょうか？