Tailwind CSS: Afficher le texte sur l'image Hover

Comment afficher le texte sur l'image sur une plantille d'image, à l'aide de Tailwind CSS: Texte d'affichage sur l'image Hover?

Voici mon image? Je veux que le texte "mammifères" soit affiché lorsque l'utilisateur plane l'image?

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

csstailwind-css

27 janv. 2021renathy

Une autre idée utilise group-hover classe.

<div class="w-64 bg-red-100 relative group">
  <img src="https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg" />
  <div class="opacity-0 group-hover:opacity-100 duration-300 absolute left-0 bottom-0 right-0 z-10 flex justify-center items-end text-xl bg-gray-200 text-black font-semibold">Dwayne</div>
</div>

DÉMO

16 nov. 2021doğukan