Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

TailwindCSS and background animation

Hello,

I have this code for a layout.

<template>
    <div>
		<header></header>

        <main class="flex flex-col px-8 z-10">
            <RouterView></RouterView>
        </main>
        
		<!-- background animation -->
        <div v-if="route.name === 'home'" class="absolute inset-0 overflow-hidden flex-grow z-1">
            <div v-for="rowIndex in 20" class="inline-flex -mt-[28px] -ml-[50px] even:ml-[2px]">
                <div
                    v-for="index in 50"
                    class="
                        relative w-[100px]
                        h-[100px]
                        m-[2px]
                        bg-transparent
                        hover:bg-yggdra-light
                        effect-hexagon
                        after:content-['']
                        after:absolute
                        after:top-1
                        after:left-1
                        after:right-1
                        after:bottom-1
                        after:bg-transparent
                        after:hover:bg-yggdra-dark
                    "></div>
            </div>
        </div>
    </div>
</template>

With some additional styles.

<style scoped>
    .effect-hexagon {
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .effect-hexagon:after {
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }


    @media (prefers-reduced-motion: no-preference) {
        .effect-hexagon {
            transition: 1s;
        }

        .effect-hexagon:hover {
            transition: 0s;
        }
    }
</style>

I need the main content in the foreground and the animation background in the background.

But the problem is that the foreground hides a part of the background and that the foreground prevents the mouse from begin detected for hover on the background.

Whereever I move the mouse on the screen, even on the foreground, I need that the background is animated on hover with the mouse.

How can I solve this ?

Thanks for your help.

V

0 likes
0 replies

Please or to participate in this conversation.