Back to Discover

Tailwind CSS Hover Animation Examples

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50 min-h-screen py-12 px-4">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-900 mb-3 text-center">Tailwind CSS Hover Animations</h1>
    <p class="text-gray-600 text-center mb-12">Minimal and professional hover effects</p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Scale Up Animation -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4">
          <ion-icon name="rocket-outline" class="text-2xl text-blue-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Scale Up</h3>
        <p class="text-gray-600 text-sm">Grows smoothly on hover with enhanced shadow</p>
      </div>

      <!-- Slide Up Animation -->
      <div class="bg-white rounded-lg p-6 shadow-sm overflow-hidden group cursor-pointer">
        <div class="transition-transform duration-300 group-hover:-translate-y-2">
          <div class="flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mb-4">
            <ion-icon name="trending-up-outline" class="text-2xl text-purple-600"></ion-icon>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Slide Up</h3>
          <p class="text-gray-600 text-sm">Content slides upward smoothly</p>
        </div>
      </div>

      <!-- Border Animation -->
      <div class="bg-white rounded-lg p-6 shadow-sm border-2 border-transparent hover:border-green-500 transition-all duration-300 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mb-4">
          <ion-icon name="checkmark-circle-outline" class="text-2xl text-green-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Border Glow</h3>
        <p class="text-gray-600 text-sm">Colored border appears on hover</p>
      </div>

      <!-- Rotate Icon -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-shadow duration-300 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-orange-100 rounded-lg mb-4">
          <ion-icon name="settings-outline" class="text-2xl text-orange-600 transition-transform duration-500 group-hover:rotate-180"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Rotate Icon</h3>
        <p class="text-gray-600 text-sm">Icon rotates 180 degrees on hover</p>
      </div>

      <!-- Background Shift -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 transition-all duration-300 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-blue-100 group-hover:bg-white/20 rounded-lg mb-4 transition-colors duration-300">
          <ion-icon name="color-palette-outline" class="text-2xl text-blue-600 group-hover:text-white transition-colors duration-300"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 group-hover:text-white mb-2 transition-colors duration-300">Background Shift</h3>
        <p class="text-gray-600 group-hover:text-white/90 text-sm transition-colors duration-300">Gradient background on hover</p>
      </div>

      <!-- Lift Effect -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-red-100 rounded-lg mb-4">
          <ion-icon name="heart-outline" class="text-2xl text-red-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Lift Effect</h3>
        <p class="text-gray-600 text-sm">Card lifts up with enhanced shadow</p>
      </div>

      <!-- Bounce Animation -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-shadow duration-300 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-yellow-100 rounded-lg mb-4">
          <ion-icon name="flash-outline" class="text-2xl text-yellow-600 group-hover:animate-bounce"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Bounce</h3>
        <p class="text-gray-600 text-sm">Icon bounces when hovering</p>
      </div>

      <!-- Gradient Border -->
      <div class="relative bg-white rounded-lg p-6 shadow-sm cursor-pointer group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-[2px] bg-white rounded-lg"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-pink-100 rounded-lg mb-4">
            <ion-icon name="sparkles-outline" class="text-2xl text-pink-600"></ion-icon>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Gradient Border</h3>
          <p class="text-gray-600 text-sm">Animated gradient border appears</p>
        </div>
      </div>

      <!-- Blur to Focus -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer group">
        <div class="flex items-center justify-center w-12 h-12 bg-indigo-100 rounded-lg mb-4 group-hover:blur-0 blur-[0.5px] transition-all duration-300">
          <ion-icon name="eye-outline" class="text-2xl text-indigo-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Blur to Focus</h3>
        <p class="text-gray-600 text-sm">Subtle blur effect that sharpens</p>
      </div>

      <!-- Interactive Button -->
      <div x-data="{ clicked: false }" class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-shadow duration-300 cursor-pointer">
        <div class="flex items-center justify-center w-12 h-12 bg-teal-100 rounded-lg mb-4">
          <ion-icon name="hand-left-outline" class="text-2xl text-teal-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Interactive</h3>
        <p class="text-gray-600 text-sm mb-4">Alpine.js powered interaction</p>
        <button 
                @click="clicked = !clicked"
                class="w-full py-2 px-4 rounded-lg font-medium transition-all duration-200"
                :class="clicked ? 'bg-teal-600 text-white' : 'bg-teal-100 text-teal-700 hover:bg-teal-200'">
          <span x-text="clicked ? 'Activated!' : 'Click Me'"></span>
        </button>
      </div>

      <!-- Slide In Content -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer group relative h-full">
        <div class="p-6">
          <div class="flex items-center justify-center w-12 h-12 bg-cyan-100 rounded-lg mb-4">
            <ion-icon name="arrow-forward-outline" class="text-2xl text-cyan-600"></ion-icon>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Slide In</h3>
          <p class="text-gray-600 text-sm">Hidden content slides in</p>
        </div>
        <div class="absolute inset-0 bg-cyan-600 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300 flex items-center justify-center">
          <p class="text-white font-medium">Hidden Content!</p>
        </div>
      </div>

      <!-- Ring Effect -->
      <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer hover:ring-4 hover:ring-violet-200">
        <div class="flex items-center justify-center w-12 h-12 bg-violet-100 rounded-lg mb-4">
          <ion-icon name="radio-outline" class="text-2xl text-violet-600"></ion-icon>
        </div>
        <h3 class="text-lg font-semibold text-gray-900 mb-2">Ring Effect</h3>
        <p class="text-gray-600 text-sm">Colored ring appears around card</p>
      </div>

    </div>
  </div>

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-top: 0;
}

button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

console.log('Editor loaded!');

let clickCount = 0;

function handleClick() {
  clickCount++;
  const output = document.getElementById('output');
  output.innerHTML = `
    <h3>Clicked ${clickCount} time(s)!</h3>
    <p>Time: ${new Date().toLocaleTimeString()}</p>
  `;
  console.log(`Button clicked ${clickCount} times`);
}

Comments (0)

No comments yet. Be the first!