时间戳

首页 > 解决方案 > Tailwind CSS：在图像悬停时显示文本

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

问题描述

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

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

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

标签： csstailwind-css

解决方案

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

<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>

推荐阅读