Contents blur on tilt element once mouse-leave

[elliottmangham]

Hello,

Tilt is working very well, although I have came across an issue where when you move your mouse off a tilt element with scaling enabled, the contents blur afterwards.

See below a screenshot.

Here you can see the content in the box in the middle is blurry, as opposed the content on the right. Each of these boxes are separate tilt elements, each with scaling enabled.

• The left is during hovered state.
• The middle is a result of hovering over the element and then moving the mouse off (the issue is the content is blurry)
• The right hasn't had any interaction yet.

Thanks in advance.

Other-than this issue, great job with tilt.js. I love it.

[elliottmangham]

After some more investigation, I've noticed it is caused by transform-style: preserve-3d, although this is required for the parallax effect.

@gijsroge do you know of any other solution?

[curthard89]

Bit late to the party, but Ive just added a listener to mouse over and mouse out to add a class to the element being tilted, upon enter, apply the z transforms, on exit, let it be removed. This keeps text clear and readable when not being tilted.