Have a look at this.
This shows two ways of doing this. Both use cut outs of the images. One method in buttons and another just the image.
Both methods use the image or button as an overlay over the background image.
I used Pixalmator to copy the image parts.
( Pixalmator has a brilliant feature where you can select an area and convert it to a shape. This means you can adjust things really easy )
For the Button images I then pasted them into a Hype project, exported the Project and then used its resource folder to get the Images for the Real project. ( Because you have to choose them not drag drop or paste)
Where I used Images for the Males legs I could just paste them in from Pixalmator.
I wanted pairs of image parts to show when one is hovered so each pair has the same class name which the JS looks for.
The project below most likely has a lot of duplicate image files where I was playing around. So when doing yours, work out how you want to do it and do it once.
I have not added any on click action to go to scene on the buttons or images but that is a standard feature within hype…
Hope this helps
BodySmall5.hypetemplate.zip (976.6 KB)