带有信息的圆形 div，悬停时显示所有信息

Question

我想让三个圆形 div 彼此相邻（这不是问题）。在圆圈的底部，它将显示我的信息文本的第一个单词。悬停时，信息文本会上升，因此您可以阅读整个文本：

我最初尝试做的是创建一个 div width: 170px 和 height: 170px，在我的 CSS 中设置一个圆圈作为背景，然后使用 class:hover 来显示文本。

我在尝试这样做时意识到，我无法像上面发布的普通图片那样隐藏圆圈“后面”的一些文字。

最好的方法是什么？

Answer 1

制作一个浮动在文本顶部的img（使用 CSS 绝对定位），使圆圈的内部部分透明。请参阅here 了解更多信息。