Skip to content

Is there a way to apply <Tilt> for a container but only actually tilt the children? #62

Answered by Blankeos
Blankeos asked this question in Q&A
Discussion options

You must be logged in to vote

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>

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by Blankeos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
enhancement New feature or request
1 participant