将鼠标悬停在HTML上时的文本

我想在悬停图像时在图像上放置文本。到目前为止，我已经创建了一个悬停效果来放大图片并降低看起来平滑的不透明度。我现在的问题是在图像上放置文本，因为我不确定如何将其放置在图片中

以下是我到目前为止的情况：

代码：

#公文包{
背景色：白色；
填充底部：100px；
}
#投资组合h1{
字体大小：30px；
字体大小：400px；
字母间距：5px；
文本对齐：居中；
颜色：#000；
}
#投资组合h2{
字体大小：15px；
字母间距：2px；
文本对齐：居中；
颜色：#000；
}
.项目{
显示：内联块；
宽度：33.33%；
右边距：-4px；
}
.img盒{
填充：20px；
}
.img项目{
宽度：100%；
显示：块；
边界半径：12px；
}
.img框img：悬停{
转换：比例（1.1）；
过渡：0.5s；
不透明度：0.5；
}

我的作品
下面是我最喜欢的项目和学校作业

将另一个DIV作为子元素添加到

.img box

，设置如下，其中包含文本。最重要的部分是

位置：绝对

，加上文本位置的

顶部

、

左侧

和

变换

设置

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

还要确保将

position:relative

添加到

.img box

中，以便为绝对定位的文本DIV创建锚元素：

#公文包{
背景色：白色；
填充底部：100px；
}
#投资组合h1{
字体大小：30px；
字体大小：400px；
字母间距：5px；
文本对齐：居中；
颜色：#000；
}
#投资组合h2{
字体大小：15px；
字母间距：2px；
文本对齐：居中；
颜色：#000；
}
.项目{
显示：内联块；
宽度：33.33%；
右边距：-4px；
}
.img盒{
填充：20px；
位置：相对位置；
}
.img项目{
宽度：100%；
显示：块；
边界半径：12px；
}
.img框img：悬停{
转换：比例（1.1）；
过渡：0.5s；
不透明度：0.5；
}
.img框.悬停文本{
显示：无；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.img框：悬停。悬停文本{
显示：块；
}

我的作品
下面是我最喜欢的项目和学校作业
测试文本1
测试文本2
测试文本3

您可以使用

伪元素

，您可以添加所需的文本作为属性值，也可以手动添加，这将非常糟糕。然后按照您的意愿对其进行样式设置，但当然要添加position:absolute，使其脱离流程，以便可以将其放置在图像顶部。别忘了你在父母身上的

位置：relative

我使用了div，因为

我放了你给我的东西，但图像中没有显示任何文本。测试后，文本出现在整个网页的中间，而不是图像本身，你添加了<代码>位置：相对<代码> >代码>。