Tailwind CSS: display text on image hover

user_1092125 0
Viewed 19768

How can I show text on image hover, using Tailwind CSS: display text on image hover?

Here is my image? I want text "mammals" to be displayed when user hovers image?

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

I prefer to play around with position relative and absolute because it gives me more options to work with. Check out this code Display text on hover

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

You can use the title atribute in your img tag.

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

Please use this code works well

  <div class="relative ">
    <a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
      <h1  class=tracking-wider >Title</h1>
      <p  class="mx-auto">Description</p>
      </a>
    <a href="#" class="relative">
        <div class="h-48 flex flex-wrap content-center">
            <img src="/image_url" class="mx-auto  " alt="">
        </div>
    </a>
  </div>

enter image description here

user_128085200

Another idea is using group-hover class.

.as-console-wrapper {
  display: none !important;
}
<script src="https://cdn.tailwindcss.com"></script>

<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 inset-x-0 bottom-0 flex justify-center items-end text-xl bg-gray-200 text-black font-semibold">Dwayne</div>
</div>

DEMO

user_106987410
Related