Tailwind Hover effects component

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


Basic example

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

        
            
      <div
        class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs"
        data-mdb-ripple="true" data-mdb-ripple-color="light"
      >
        <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-100 transition duration-300 ease-in-out" style="background-color: rgba(251, 251, 251, 0.2)"></div>
        </a>
      </div>
      
        
    

Color

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

Louvre
Louvre
Louvre
Louvre
Louvre
Louvre
        
            
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-50 transition duration-300 ease-in-out bg-indigo-700"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-20 transition duration-300 ease-in-out bg-purple-700"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-70 transition duration-300 ease-in-out bg-green-700"></div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-4">
        <div class="mb-4 md:mb-0">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-30 transition duration-300 ease-in-out bg-red-700"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-40 transition duration-300 ease-in-out bg-white"></div>
          </div>
        </div>
        <div class="mb-4 md:mb-0">
          <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
            <img src="https://mdbcdn.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 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-60 transition duration-300 ease-in-out bg-blue-400"></div>
          </div>
        </div>
      </div>
      
        
    

Gradient

Set a fancy gradient as an overlay.

Louvre
        
            
      <div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
        <img src="https://mdbcdn.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 w-full h-full overflow-hidden opacity-0 transition duration-300 ease-in-out bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:opacity-70"></div>
      </div>
      
        
    

Zoom

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

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

Shadow

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

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

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