Image Block hover effect using image map?

Hi there,

first post and hoping someone can assist or if not help me find a workaround…

im working on a homepage, and some image requirements.

i have one large image in an image block which extends the full width of the page, and starts right at the top (using a transparent header). 
 

this works great, but now I would like to achieve the following:

- there are 5 people in the image. I would like the whole image to change to a different image when the user hovers over one of the 5 people. 
 

so there are in total 6 images, 1 default, and 5 which could replace it depending on which part of the image is hovered over.

i dont currently know how to achieve this, im thinking to create an image map using a website I’ve seen, however I dont know where id go from there.

other option is i split the original image into 5 and add a hover effect to each to swap the hovered over part with a hidden image below? I haven’t managed to achieve this either as I can’t make the 5 side by side images look like 1 image, they either leave small gaps between each one or overlap too much. 
 

any suggestions with either option would be massively appreciated. First time using square space and it’s very frustrating having what seems like simple ideas prove challenging to action. We’ll get there though…

thanks 🙂

Attached are main image, and the 5 alt images to make things clear. So user hovers over a person and that person ‘raises their sign’.

I think you can add a large image

then add 5 small images over it

then share link to page, I can give code to change image to another on hover