Html 如何在使用flexbox显示的以下图像上实现覆盖动画？

关键在于，每个图像都位于一个容器中，以约束其宽度，并使用flexbox将其垂直对齐

我可以在悬停时发生一些事情，但动画的位置不正确。我所看到的这些类型的动画的大多数实现都使用了绝对位置和相对位置，但如果我使用flexbox，我似乎不知道该怎么做

请参阅下文：

.logo{
宽度：25vw；
}
//这将在徽标周围创建一个方形框
.标识箱{
宽度：25vw；
高度：25vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：行；
}
.标志{
背景：红色；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
弯曲方向：行；
柔性包装：包装；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：#008CBA；
溢出：隐藏；
宽度：10%；
身高：0；
过渡：放松；
}
.logo容器：悬停.overlay{
身高：10%；
}
.文本{
空白：nowrap；
颜色：白色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

香辣墨西哥培根ipsum dolor amet porchetta汉堡包意大利熏火腿，安都尔圆。鸡肉熏牛肉猪排鹿肉香肠。Ribeye鸡腿肉丸landjaeger alcatra法兰克福。牛侧舌，卡皮科拉香肠尾，安杜耶
牛肩肉。T骨鸡腿、猪肚香肠、丘比特侧翼排骨、里脊肉片、香肠、熏牛肉。香克利法兰克福猪肉里脊尾熏牛肉，肉糕猪肉波切塔恶魔汉堡牛肉培根猪排。

小腿球头多纳猪肉肚里脊牛腰肉皮卡尼亚和香肠培根。培根鲍丁火腿，恶魔山肉丸，里贝耶猪排，短腰肉。Alcatra porchetta侧翼，腊肠比尔顿鸡尾turducken火腿pancetta picanha frankfurter
培根恶魔岛胸脯火腿节turducken landjaeger。母牛火腿飞节侧翼kielbasa猪。Boudin鸡肉三尖腌牛肉leberkas bresaola肥背球尖t骨短腰肉。

绝对位置取决于最近的父级
相对位置，如果没有提到相对位置，则相对位置将是html/正文。
在您的情况下，如果要在容器中显示，则必须向容器添加相对位置：

.logo-container { position: relative; }

如果您给出
.logo容器
位置：相对
这样绝对定位的
覆盖层
可以与其相关，然后移动
高度：25vw至
。徽标
文本应呈现在每个图像的顶部

请注意，如果此演示中我还更改了一些您可能需要重置/调整的
高度
/
宽度
值，那么我将对其进行修改

根据评论更新

我还更改了
文本上的位置，使其正确显示

堆栈片段


.logo{
宽度：25vw；
}
.标志容器{
位置：相对位置；
}
/*这将在徽标周围创建一个方形框*/
.标识箱{
宽度：25vw；
高度：25vw；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.标志{
背景：红色；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
弯曲方向：行；
柔性包装：包装；
}
.覆盖{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景色：#008CBA；
溢出：隐藏；
身高：0；
过渡：放松；
}
.logo容器：悬停.overlay{
身高：100%；
}
.文本{
颜色：白色；
字体大小：20px；
位置：相对位置；
溢出：隐藏；
最高：50%；
转化：translateY（-50%）；
}

香辣墨西哥培根ipsum dolor amet porchetta汉堡包意大利熏火腿，安都尔圆。鸡肉熏牛肉猪排鹿肉香肠。Ribeye鸡腿肉丸landjaeger alcatra法兰克福。牛侧舌，卡皮科拉香肠尾，安杜耶
牛肩肉。T骨鸡腿、猪肚香肠、丘比特侧翼排骨、里脊肉片、香肠、熏牛肉。香克利法兰克福猪肉里脊尾熏牛肉，肉糕猪肉波切塔恶魔汉堡牛肉培根猪排。

小腿球头多纳猪肉肚里脊牛腰肉皮卡尼亚和香肠培根。培根鲍丁火腿，恶魔山肉丸，里贝耶猪排，短腰肉。Alcatra porchetta侧翼，腊肠比尔顿鸡尾turducken火腿pancetta picanha frankfurter
培根恶魔岛胸脯火腿节turducken landjaeger。母牛火腿飞节侧翼kielbasa猪。Boudin鸡肉三尖腌牛肉leberkas bresaola肥背球尖t骨短腰肉。

谢谢。这是非常接近我需要的。我想它覆盖的标志盒，而不是标志，使所有的覆盖是相同的size@Chris然后将
高度：25vw
移回
标识框
…将在一秒钟内更新我的答案。@Chris Updated！谢谢@LGSon。我想知道为什么文本也出现在一行中？@Chris再次更新…删除了
text