Html CSS覆盖悬停视图错误div

这是我第一次尝试覆盖。不过，它在某种程度上是可行的，将第一幅图像悬停在上面会覆盖在下面。。我试着使位置绝对，但这意味着覆盖将保持在顶部

卢兹

卢兹

卢兹

偏航

css:

.row{
利润率：2%；
}
.街.厨房{
浮动：左；
右：5%；
宽度：300px；
高度：350px；
}
.世界其他地区.厨房项目img{
宽度：280px；
高度：330px；
填充：0；
保证金：0；
}
.row.galleryItem.imgCaption{
顶部：0px；
宽度：300px；
高度：350px；
背景：#FF2400；
不透明度：0；
}
.row.galleryItem.imgCaption p{
颜色：白色；
字体大小：400；
字体大小：16px；
文本对齐：居中；
}
.row.galleryItem:悬停.imgCaption{
不透明度：0.7；
}
.厨房集装箱{
保证金：自动；
最大宽度：900px；
}

---

下面是我做的一个例子来说明这个问题。任何帮助都将不胜感激。

您的问题是标题位置错误。可以通过添加

float:left来完成到您的img

这是一个例子

编辑：

其他变化：
标题div没有正确淡出，所以我将显示方法从，
opacity:0
->
opacity:0.7，至
显示：无
->
显示：块

我从
元素中删除了边距和填充，因为它看起来被替换了。
因为它不允许我在上面发布我的jsfiddle，这里就是它。