@casoon/dragonfly/effects/interaction/hover.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Hover Effects
 * 
 * This file contains various hover effects for modern UIs.
 * The effects are optimized for performance and consider reduced motion.
 */

/* Component Styles */
@layer components {
    .hover-scale {
        transition: transform 0.3s ease;
    }

    .hover-scale:hover {
        transform: scale(1.05);
    }

    .hover-scale-sm {
        transition: transform 0.3s ease;
    }

    .hover-scale-sm:hover {
        transform: scale(1.02);
    }

    .hover-scale-lg {
        transition: transform 0.3s ease;
    }

    .hover-scale-lg:hover {
        transform: var(--transform-scale-110);
    }

    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        box-shadow: 0 var(--spacing-2-5) var(--spacing-5) rgb(0 0 0 / 10%);
        transform: translateY(calc(-1% * var(--spacing-1)));
    }

    .hover-lift-sm {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift-sm:hover {
        box-shadow: 0 var(--spacing-1) var(--spacing-2-5) rgb(0 0 0 / 10%);
        transform: translateY(calc(-1 * var(--border-width-thick)));
    }

    .hover-lift-lg {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift-lg:hover {
        box-shadow: 0 var(--spacing-5) 40px rgb(0 0 0 / 10%);
        transform: translateY(calc(-1% * var(--spacing-2-5)));
    }

    .hover-tilt {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
    }

    .hover-tilt:hover {
        transform: rotateX(10deg) rotateY(10deg);
    }

    .hover-tilt-sm {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
    }

    .hover-tilt-sm:hover {
        transform: rotateX(5deg) rotateY(5deg);
    }

    .hover-tilt-lg {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
    }

    .hover-tilt-lg:hover {
        transform: rotateX(15deg) rotateY(15deg);
    }

    .hover-glow {
        transition: box-shadow 0.3s ease;
    }

    .hover-glow:hover {
        box-shadow: 0 0 var(--spacing-5) var(--hover-glow-color, rgb(59 130 246 / 50%));
    }

    .hover-glow-sm {
        transition: box-shadow 0.3s ease;
    }

    .hover-glow-sm:hover {
        box-shadow: 0 0 var(--spacing-2-5) var(--hover-glow-color, rgb(59 130 246 / 50%));
    }

    .hover-glow-lg {
        transition: box-shadow 0.3s ease;
    }

    .hover-glow-lg:hover {
        box-shadow: 0 0 30px var(--hover-glow-color, rgb(59 130 246 / 50%));
    }

    .hover-border {
        position: relative;
        transition: border-color 0.3s ease;
    }

    .hover-border::after {
        background: var(--hover-border-color, #3b82f6);
        bottom: 0%;
        content: '';
        height: var(--border-width-thick);
        left: 0%;
        position: absolute;
        transition: width 0.3s ease;
        width: 0%;
    }

    .hover-border:hover::after {
        width: 100%;
    }

    .hover-border-sm::after {
        height: var(--border-width);
    }

    .hover-border-lg::after {
        height: var(--spacing-1);
    }

    .hover-bg {
        transition: background-color 0.3s ease;
    }

    .hover-bg:hover {
        background-color: var(--hover-bg-color, rgb(59 130 246 / 10%));
    }

    .hover-bg-sm:hover {
        background-color: var(--hover-bg-color-sm, rgb(59 130 246 / 5%));
    }

    .hover-bg-lg:hover {
        background-color: var(--hover-bg-color-lg, rgb(59 130 246 / 20%));
    }

    .hover-color-primary {
        --hover-glow-color: var(--hover-primary, rgb(59 130 246 / 50%));
        --hover-border-color: var(--hover-primary, #3b82f6);
        --hover-bg-color: var(--hover-primary-bg, rgb(59 130 246 / 10%));
    }

    .hover-color-secondary {
        --hover-glow-color: var(--hover-secondary, rgb(107 114 128 / 50%));
        --hover-border-color: var(--hover-secondary, #6b7280);
        --hover-bg-color: var(--hover-secondary-bg, rgb(107 114 128 / 10%));
    }

    .hover-color-success {
        --hover-glow-color: var(--hover-success, rgb(16 185 129 / 50%));
        --hover-border-color: var(--hover-success, #10b981);
        --hover-bg-color: var(--hover-success-bg, rgb(16 185 129 / 10%));
    }

    .hover-color-error {
        --hover-glow-color: var(--hover-error, rgb(239 68 68 / 50%));
        --hover-border-color: var(--hover-error, #ef4444);
        --hover-bg-color: var(--hover-error-bg, rgb(239 68 68 / 10%));
    }

    .hover-color-warning {
        --hover-glow-color: var(--hover-warning, rgb(245 158 11 / 50%));
        --hover-border-color: var(--hover-warning, #f59e0b);
        --hover-bg-color: var(--hover-warning-bg, rgb(245 158 11 / 10%));
    }

    .hover-color-info {
        --hover-glow-color: var(--hover-info, rgb(6 182 212 / 50%));
        --hover-border-color: var(--hover-info, #06b6d4);
        --hover-bg-color: var(--hover-info-bg, rgb(6 182 212 / 10%));
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .hover-scale,
        .hover-scale-sm,
        .hover-scale-lg,
        .hover-lift,
        .hover-lift-sm,
        .hover-lift-lg,
        .hover-tilt,
        .hover-tilt-sm,
        .hover-tilt-lg,
        .hover-glow,
        .hover-glow-sm,
        .hover-glow-lg,
        .hover-border,
        .hover-border-sm,
        .hover-border-lg,
        .hover-bg,
        .hover-bg-sm,
        .hover-bg-lg {
            transition: var(--transition-none);
        }
        
        .hover-scale:hover,
        .hover-scale-sm:hover,
        .hover-scale-lg:hover,
        .hover-lift:hover,
        .hover-lift-sm:hover,
        .hover-lift-lg:hover,
        .hover-tilt:hover,
        .hover-tilt-sm:hover,
        .hover-tilt-lg:hover {
            transform: var(--transform-none);
        }
        
        .hover-border::after {
            transition: var(--transition-none);
        }
    }
}