隐藏文本，直到HTML元素展开才能显示它？

Question

我有一个div，它在悬停在它上方时从50px的高度扩展到125px。我想在div的底部放置一些文本和一个图像，这样它就会被隐藏，直到div扩展，并且当扩展滚过它时它会被显示出来。这是我在CSS中扩展的语法：

.Home {
height:50px;
width:100px;
display:inline-block;
position:relative;
z-index:1;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
}

.Home:hover {
height 150px;
}

任何人都可以帮我指出如何做到这一点的正确方向吗？

Answer 1

您只需要在.Home类定义中添加overflow：hidden。还要在.Home：hover类中添加冒号后的冒号。

.Home { height:50px;
width:100px;
display:inline-block;
position:relative;
z-index:1;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
overflow:hidden;
}