Jquery 尝试在悬停时使文本显示在图像上（可能未使用正确的属性）

我正在为我的工作创建一个草稿“会见团队”样式的页面，并试图使每个人的图像在你将鼠标悬停在上面时消失，并显示文本来解释他们的行为。目前，我所使用的是

hover:

属性，它似乎没有任何作用。下面是我的代码

.info{
显示：内联块；
宽度：32%；
高度：300px；
边缘顶部：5px；
文本对齐：居中；
背景：#CFCFCF；
}
.info h5{
显示：块；
背景：白色；
保证金：0；
}
.info p{
显示：块；
填充顶部：10px；
保证金：0；
}
.hoverinfo{
位置：静态；
颜色：#000000；
光标：指针；
}
.hoverinfo p{
显示：无；
颜色：#000000；
}
.hoverinfo:hoverp{
背景色：#C4；
宽度：32%；
高度：300px；
边框：1px纯黑；
}

会见团队
乔·布洛格斯
测试段

约翰·史密斯
测试段

无名氏
测试段

乔·布洛格斯
测试段

约翰·史密斯
测试段

无名氏
测试段

您只需使用display:none隐藏class或ID，并将class/ID:hover设置为display:block

要淡入或淡出图像，可以使用不透明度而不是显示：无；并使用诸如ease.in/out之类的css转换

更新代码，使文本与图像成比例居中

.container{
显示：内联块；
高度：320px；
宽度：200px；
背景：白色；
文本对齐：居中；
}
.hoverinfo{
宽度：200px；
高度：300px；
背景：#CFCFCF；
位置：相对位置；
}
.悬停文字{
不透明度：0；
位置：绝对位置；
文本对齐：居中；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.hoverinfo:hover.hovertext{
不透明度：1；
过渡：全部。5秒轻松；
}
.hoverinfo:hover.hoverimage{
不透明度：0；
过渡：全部。5秒放松；
}

乔·布洛格斯
测试段
乔博客
测试段
乔博客
测试段
简博客
测试段

可能重复#imagehover.hoverinfo div上的相对位置和段落上的绝对位置。@pol谢谢-因此在css中为图像创建一个新属性，并将位置设置为相对位置？-谢谢您的帮助，但这会将文本悬停在图像上吗？有没有一种方法可以让图像在我悬停时淡出，段落淡入？是的，当然你可以进行css转换，它会淡出图像并淡入文本。我添加了另一个带有淡入/淡出的版本，我希望这就是你想要的。非常感谢，这是一个很大的帮助。唯一的问题是，当我将鼠标悬停在图像上时，文本会在图像所在位置的下方淡出，而不是使用与图像相同的空间。有办法吗？我会修改并更新代码，不用担心，欢迎：）如果新代码适合你，请接受答案：）。