Django Hover 3D Component

Hover3d applies a CSS 3D perspective tilt to its content when the pointer moves over it. Use it to add visual depth to cards, hero images, or profile panels.

Basic

Preview

Code

<c-lb.hover3d class="w-72">
    <figure class="rounded-2xl overflow-hidden shadow-lg">
        <img
            src="https://images.unsplash.com/photo-1703505841379-2f863b201212?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="3D hover effect"
            class="w-full h-full object-cover"
        />
    </figure>
</c-lb.hover3d>

With Card

Preview

Classic Timepiece

Elegant design with a 3D hover effect—move your mouse over the card to see the tilt.

Code

<!-- Wrapping a card with hover-3d. Note: only non-interactive content is
     permitted inside the wrapper. Buttons and links must be placed outside. -->
<c-lb.hover3d class="w-96">
    <c-lb.card variant="primary" class="shadow-sm h-full">
        <c-lb.card.figure>
            <img
                src="https://images.unsplash.com/photo-1580658001207-ccd9b884191c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt="Classic timepiece"
                class="w-full object-cover"
            />
        </c-lb.card.figure>
        <c-lb.card.body>
            <c-lb.card.title>Classic Timepiece</c-lb.card.title>
            <p>Elegant design with a 3D hover effect—move your mouse over the card to see the tilt.</p>
        </c-lb.card.body>
    </c-lb.card>
</c-lb.hover3d>

Only non-interactive content (no buttons or links) should be placed inside the hover-3d wrapper. For clickable cards, wrap the entire c-lb.hover3d element in an anchor tag instead.

API Reference

`c-lb.hover3d`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply