Jump to content

Image Block hover effect using image map?

Recommended Posts

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 🙂

Link to comment
  • Replies 2
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.