I need to make multiple animations on a web page, all triggered by the mouse click action.
The goal is to have a house in the background, and all the elements that compose it must come alive when the mouse passes. I managed to configure my actions and my timelines differently.
Here is the problem, the images that follow one another are not necessarily straight or square, and the box of the image is far too large. In picture it gives this for exemple:
I would like that during the passage of the mouse, only the element delimited by its contour is clickable and not the entire box. The multitude of images makes the user do not necessarily click on the good animation since the windows are square.
Here is the box where the hover take effect:
I tried with different format of images (svg,png,jpeg…) and the result are the same. I specify that my images have a transparent background.
Any ideas to my problem?
Thank so much.
Sorry for my english.