Tailwind CSS：在图像悬停时显示文本

Question

如何使用 Tailwind CSS 在图像悬停时显示文本：在图像悬停时显示文本？

这是我的头像？我希望在用户悬停图像时显示文本“哺乳动物”？

 <img src="/img/cat/categories/mammals.png" alt="mammals" class="max-w-full max-h-full">

原文由 renathy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 img 标签中使用标题属性。

 <img src="/img/cat/categories/mammals.png" alt="mammals" class="max-w-full max-h-full" title="mammals">

原文由 luxa_code 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我更喜欢使用相对位置和绝对位置，因为它给了我更多的选择。查看此代码 在悬停时显示文本

<div class="w-64 h-64 bg-red-100 relative">
  <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg')"></div>
  <div class="opacity-0 hover:opacity-100 duration-300 absolute inset-0 z-10 flex justify-center items-center text-6xl text-white font-semibold">Dwayne</div>
</div>

原文由 Digvijay 发布，翻译遵循 CC BY-SA 4.0 许可协议