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
javascript

        
            
      <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 bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
        </a>
      </div>

        
            
      // Initialization for ES Users
      import {
        Ripple,
        initTE,
      } from "tw-elements";
      
      initTE({ Ripple });

Showing the animation effect

As you can see in the above example, you can add any animation to any element on the page by using the following classes:

transition: used to animate the chaged properties on hover,
duration-x: used to define the duration of the animation where x is the time in milliseconds; e.g. duration-300.

Then, you should be able to add any type of animation by changing the property on hover by using the class: [hover:tw-class-name] e.g. hover:opacity-100.

Hey there 👋 we want to make TW 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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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 bottom-0 left-0 right-0 top-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" />

Hover effects

Basic example

Showing the animation effect

Color

Gradient

Zoom

Shadow

Related resources

Tutorials:

Extended Docs:

Design System (Figma):