How to change the hitbox of elements?

How do I change the hitbox of elements?

Hello, I am new to Webflow so I just need some help

On my site I have got an Animoji icon and I have got a minor interaction on it. However the interaction plays before you hover over the actual icon, how do I change it so the animation starts once you exactly hover over the icon?

Thanks!

Here is my public share link: https://zach-dinge-portfolio.webflow.io

Hi @zachdinge, thanks for your post. Welcome to the community.

Would it be possible for you to help share some additional detail that will help the community to provide assistance?

It helps to get a visual description of the behavior and what other elements/styles on the page might be affecting.

Read only link: https://preview.webflow.com/preview/zach-dinge-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=zach-dinge-portfolio&preview=31a9f7819dfea5fbd45a00a8d89648e4&workflow=preview

The face the arrow is pointing at is what I want help with, so basically I want the face to jiggle (start animation) once you exactly hover over it. Right now the animation starts before you actually hover over the face, it starts when you hit the image element box.

Does this make sense?

Hi @zachdinge, thanks for your reply. The trigger for the interaction is set to fire whenever the mouse is on the image, so what I would do is to crop the image to reduce the space around the head in the image.

Upload the new file to Webflow and then change the image and check the results.

I made a quick video:

I hope this helps!

Awesome, that helps me out so much!

Thanks so much Dave, I really appreciate it.

1 Like