-
I'm looking for a way to apply the hover with the container, but only actually tilt the child. I feel like it could be fixed if the hover was applied on the container but only the child moves. That way, it's more predictable how the tilt happens when you hover. <Tilt>
<div> /* the container */
<div></div> /* the child */
</div>
</Tilt> Is there already a way to do this? |
Beta Was this translation helpful? Give feedback.
Answered by
Blankeos
Jan 26, 2023
Replies: 1 comment
-
I came up with a work-around that works absolutely well! const [isHovered, setIsHovered] = useState<boolean>(false);
<div
className="relative p-8 bg-blue-500"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<Tilt
tiltReverse
tiltAngleXManual={isHovered ? undefined : 0}
tiltAngleYManual={isHovered ? undefined : 0}
trackOnWindow={true}
>
<div className="relative w-[40rem] h-[25rem] ">
<Image
src="/ticket.webp"
fill
alt="ticket"
className="object-contain"
/>
</div>
</Tilt>
</div> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
Blankeos
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I came up with a work-around that works absolutely well!