Html 在绝对定位的图像上定位div元素

我有两个图像，它们相互重叠（一个绝对定位），这样我可以在其中一个上面悬停以查看另一个。我还想定位一个“文本框”（一个带有彩色背景的div，可以容纳一些简单的文本），它跨越顶部图像的下1/4，但是，当下面的图像已经完全定位时，我在尝试定位所述文本框时遇到了一些问题

我在下面附上了一个示例代码笔，以及一张我理想的目标图像。有没有一种简单的方法可以用HTML/CSS实现这一点

这里有文本栏吗？

添加到“tag”类的Css：

您也可以在不使用jquery的情况下使用css

：hover

伪类：

---

啊，谢谢你！这正是我要找的！

<img src="img1.foo" class="img1" />
<img src="img2.foo" class="img2" />
<div class="textBar">Text bar here?</div>

.tag {
  position: absolute;
  z-index: 3; /*place above the images */
  bottom: 0; /* put it at the bottom */
  padding: 20px; 
  width: 100%;
  background: lightblue;
  box-sizing: border-box; /* allow for padding to be included in width */
}

img.front:hover {
  opacity: 0;
}