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.


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.