Html 如何在CSS中的图像上添加文本面板

我目前正在重新设计我的博客，并希望在每个图片的底部有一个面板穿过博客的顶部。我在网上搜索过，找不到我想要的东西

这就是顶部图像当前的外观

在图像的底部，我一直在尝试用CSS制作一个面板，它看起来像是环绕在图像后面，就像一个3d效果弹出，然后能够向其中添加文本

---

有什么想法吗？

只需将图像和所需面板放入包装器div中，将

位置：relative

放在包装器上，这样绝对位置的文本相对于包装器放置<代码>位置：绝对和

面板

上的

z索引

，以便您可以将其定位在您想要的位置，并使其在z索引顺序中处于更高的位置。最后在图像上放置一个

z-index

，该图像的值小于

面板

z-index

HTML

<div class="textImgHover">
   <img src="someimage.jpg" />
   <div class="panel">
     <div class="panelitem">Panel Item 1</div>
     <div class="panelitem">Panel Item 2</div>
     <div class="panelitem">Panel Item 3</div>
   </div>
</div>

---

你能创建一个简化的吗？这是我能做的最好的了，因为所有的代码都在blogger模板中-

.textImgHover {
   position:relative;
}

.textImgHover .panel {
   position:absolute;
   bottom:5px;
   left:5px;
   z-index:20;
}

.textImgHover .panelitem {
   float:left; 
   margin-right:5px;
   background:rgba(255,255,255,0.2);
   color:#FFF;
   padding:3px;
}

.textImgHover img {
   position:relative;
   z-index:10;
}