Interactive Hover-Zoom Fashion Image Gallery

<div class="pt-8 pr-8 pb-8 pl-8 space-y-16">
        <h2 class="text-2xl font-semibold text-gray-900 mb-6 tracking-tight">Fashion Gallery</h2>

        <div class="flex" style="transform-style: preserve-3d; transform: perspective(1000px);">
            <button class="fashion-item relative flex-shrink-0 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110 w-28 h-32" style="--image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Red Dress" onclick="viewFashion('Red Evening Dress')"></button>
            <button class="fashion-item relative flex-shrink-0 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110 w-28 h-32" style="--image: url('https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Pink Outfit" onclick="viewFashion('Pink Casual Wear')"></button>
            <button class="fashion-item relative flex-shrink-0 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110 w-28 h-32" style="--image: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Orange Style" onclick="viewFashion('Orange Summer Style')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Yellow Fashion" onclick="viewFashion('Yellow Chic Look')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Green Style" onclick="viewFashion('Green Trendy Outfit')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1492447166138-50c3889fccb1?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Teal Fashion" onclick="viewFashion('Teal Elegant Style')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1509631179647-0177331693ae?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Blue Look" onclick="viewFashion('Blue Modern Look')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Navy Style" onclick="viewFashion('Navy Classic Style')"></button>
            <button class="fashion-item relative flex-shrink-0 w-28 h-32 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110" style="--image: url('https://images.unsplash.com/photo-1502716119720-b23a93e5fe1b?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Purple Fashion" onclick="viewFashion('Purple Luxury Fashion')"></button>
            <button class="fashion-item relative flex-shrink-0 border-none outline-none cursor-pointer transition-all duration-500 ease-out hover:scale-150 hover:z-50 active:scale-110 w-28 h-32" style="--image: url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&amp;h=500&amp;fit=crop&amp;crop=center');" aria-label="Lavender Style" onclick="viewFashion('Lavender Street Style')"></button>
        </div>

        <p class="text-sm text-gray-600 mt-4">Hover over fashion looks to see the effect, click to view details</p>
    </div>

    <style>
        .fashion-item::after {
            position: absolute;
            content: "";
            inset: 0;
            width: 112px;
            height: 128px;
            background-image: var(--image);
            background-size: cover;
            background-position: center;
            border-radius: 6px;
            transform: scale(1.2);
            pointer-events: none;
            transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .fashion-item::before {
            position: absolute;
            content: attr(aria-label);
            left: 65%;
            bottom: 52px;
            font-size: 8px;
            line-height: 12px;
            transform: translateX(-50%);
            padding: 2px 0.25rem;
            background-color: #ffffff;
            color: #374151;
            border-radius: 6px;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            white-space: nowrap;
        }

        .fashion-item:hover::before {
            opacity: 1;
            visibility: visible;
        }

        .fashion-item:active::after {
            transform: scale(1.1);
        }

        .fashion-item:focus::before {
            content: "👁️ View";
        }

        .fashion-item:hover+.fashion-item {
            transform: scale(1.3);
            z-index: 40;
        }

        .fashion-item:hover+.fashion-item+.fashion-item {
            transform: scale(1.15);
            z-index: 30;
        }

        .fashion-item:has(+ .fashion-item:hover) {
            transform: scale(1.3);
            z-index: 40;
        }

        .fashion-item:has(+ .fashion-item + .fashion-item:hover) {
            transform: scale(1.15);
            z-index: 30;
        }
    </style>

    <script>
        function viewFashion(fashionName) {
            // Show fashion details feedback
            event.target.focus();
            console.log('Viewing:', fashionName);
            setTimeout(() => event.target.blur(), 1000);
        }

        lucide.createIcons();
    </script>