Tailwind CSS Hover Effects

Responsive hover effects built with Tailwind CSS. Hover effect appears when the user positions the computer cursor over an element without activating it.

Basic example

Hover effect appears when a user positions computer cursor over an element without activating it.

HTML

        
            
      <div
        class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat"
        data-te-ripple-init
        data-te-ripple-color="light">
        <img
          src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
          class="max-w-xs"
          alt="Louvre" />
        <a href="#!">
          <div
            class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
            style="background-color: rgba(251, 251, 251, 0.2)"></div>
        </a>
      </div>

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Color

Change the color and opacity by manipulating color and .hover:opacity-* classes. Have a look at our masks docs to learn more.

HTML

        
            
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-indigo-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-50"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-purple-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-20"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-green-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-70"></div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4 md:mb-0">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-red-700 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-30"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-white bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-40"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
            <img
              src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
              class="max-w-xs"
              alt="Louvre" />
            <div
              class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-blue-400 bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-60"></div>
          </div>
        </div>
      </div>

Gradient

Set a fancy gradient as an overlay.

HTML

        
            
      <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
          class="max-w-xs"
          alt="Louvre" />
        <div
          class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 opacity-0 transition duration-300 ease-in-out hover:opacity-70"></div>
      </div>

Zoom

Use .hover:scale-110 class to any element to apply zoom.

HTML

        
            
      <div class="relative max-w-xs overflow-hidden bg-cover bg-no-repeat">
        <img
          src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
          class="max-w-xs transition duration-300 ease-in-out hover:scale-110"
          alt="Louvre" />
      </div>

Shadow

Use .hover:shadow-lg class to any element to apply the effect.

HTML

        
            
      <img
        src="https://tecdn.b-cdn.net/img/new/fluid/city/113.webp"
        class="max-w-xs transition duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-black/30"
        alt="Louvre" />

If you are looking for more advanced options, try Bootstrap Hover effects from MDBootstrap.

Hover effects

Basic example

Color

Gradient

Zoom

Shadow

Related resources