Jun 7, 2024
0
Level 63
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
Please or to participate in this conversation.