为什么所有这些图像和文本框都在彼此之上？

Question

我要做的是创建两行，每行包含三个图像，然后将文本与背景图像叠加在一起（根据鼠标悬停最终会淡入或淡出），但即便如此虽然我使用了display: inline，但似乎图像的行为就像display: block一样。我甚至不知道文本框在哪里冷静。如果有更简单的方法来覆盖图像上的文本，请告诉我。非常感谢您的帮助！

这是JsFiddle：https://jsfiddle.net/wzbzyn67/#&togetherjs=gKOMzi2PKb

Answer 1

默认情况下，包含剧集图像的div是块，你必须使它们成为内联或内联块

<a href="{{ route('pages.show','about-us') }}">About Us</a>

在此检查固定的小提琴https://jsfiddle.net/wzbzyn67/1/

Answer 2

您需要更改.episodeimage以显示：内联到您的CSS结尾。

.episodeImage {
  display:inline;
}