Css 如何防止内容出现在div的边界之外？

我有这个代码，但它不是我想要的工作方式

我的意图是创建一个带有图片的盒子。当有人将鼠标光标放在方框上时，图片应该被一些信息性文本所取代，这些信息性文本向上滑动并覆盖图片，为您提供有关该图片的详细信息。 但我最终遇到的情况是，信息文本出现在图片下方，当您将鼠标悬停在图片上方时，会向上滑动以覆盖图片

*{
/*填充：0；
保证金：0*/
框大小：边框框；
}
梅因先生{
浮动：左；
利润率：10px；
}
.main、.front、.back{
位置：相对位置；
高度：300px；
宽度：300px；
显示：块；
}
.back{
位置：相对位置；
填充：10px 10px 10px 10px；
文本对齐：对齐；
顶部：0px；
右：0px；
颜色：#fff；
背景色：#333333；
-o型过渡：所有0.5s的轻松度；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.div文本{
高度：220px；
}
.main:悬停，后退{
显示：块；
顶部：-300px；
}
钮扣{
显示：内联块；
填充物：0.35em 1.2em；
边界半径：0.5em；
框大小：边框框；
保证金：3倍；
文字装饰：无；
背景色：#fff；
边框：实心#32dc32；
颜色：#33cc66；
过渡：均为0.2s；
}
按钮：悬停{
颜色：#fff；
背景色：#33cc66；
}

图像名称
图像描述等等等等等等等等等等

阅读更多

一个简单的解决方案是将

.back

div

包含在图像下方的

.front

中

它们仍将可见，并将一个放置在另一个之下。这就是为什么您应该在

.front

上使用

overflow:hidden

，这样它就不会显示超出其边界的内容

注意：如果

.back

容器不在

.front

one中，

溢出：隐藏

将不起作用

---

请检查这把小提琴：

我的答案受影响，但我简化了它

您所要做的就是在“front”类中添加文本“overflow:hidden；”，它就可以工作了

以下是问题中修复问题的代码的修改版本：

*{
/*填充：0；
保证金：0*/
框大小：边框框；
}
梅因先生{
浮动：左；
利润率：10px；
溢出：隐藏；
}
.main、.front、.back{
位置：相对位置；
高度：300px；
宽度：300px；
显示：块；
}
.back{
位置：相对位置；
填充：10px 10px 10px 10px；
文本对齐：对齐；
顶部：0px；
右：0px；
颜色：#fff；
背景色：#333333；
-o型过渡：所有0.5s的轻松度；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-webkit过渡：所有0.5s轻松；
过渡：所有0.5s缓解；
}
.div文本{
高度：220px；
}
.main:悬停，后退{
显示：块；
顶部：-300px；
}
钮扣{
显示：内联块；
填充物：0.35em 1.2em；
边界半径：0.5em；
框大小：边框框；
保证金：3倍；
文字装饰：无；
背景色：#fff；
边框：实心#32dc32；
颜色：#33cc66；
过渡：均为0.2s；
}
按钮：悬停{
颜色：#fff；
背景色：#33cc66；
}

图像名称
图像描述等等等等等等等等等等

阅读更多

谢谢。这对我来说很有效，但我不需要做你提到的所有改变。我只在.front类中包含了“overflow:hidden”，它对我来说非常有效。