Jump to content

Hover Over Button change an Image

Recommended Posts

Hi,

As the title says, I have placed transparent buttons over an image and I want the image behind to change depending on which button you hover over. I have played about with a few different types of code but can't really find anything specific that worked.

Hoping someone can help me out. Password is sonos.

https://mango-mandarin-5bjy.squarespace.com/solutions

I have listed all the buttons and images below but 1 example is fine and I will do the rest!

Thanks

 

Original Image: #block-yui_3_17_2_1_1708797264113_35229

 

Hover Over: #block-yui_3_17_2_1_1708797264113_37232

Change Image To: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/a9bb2d34-b85d-4167-9135-38067a466955/Portfolio+Kanban.png?format=2500w

 

Hover Over: #block-bfa68933596357613c51

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/8001593f-3f41-47fa-ba4e-4c74d584e01a/Front+Loading.png?format=2500w

 

Hover Over: #block-5ea3072598331fc64964

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/31ef9ede-5779-4fbe-810e-0925dc71f6c6/Customer+Defined+Value.png?format=2500w

 

Hover Over: #block-a11973350a4c3ab86afd

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/cfe93bef-d21c-4fc3-a253-114c11e4b9cb/Standard+Execution.png?format=2500w

 

Hover Over: #block-28b9cd85137768d0d12a

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/5e81c373-2ed4-43c9-bdc8-60e6e57dc9bd/Collaborative+Planning.png?format=2500w

 

Hover Over: #block-49aaa8eda7136db4eb3b

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/d88af31d-fbb6-4740-8008-413b63472162/Team+Level+Planning.png?format=2500w

 

Hover Over: #block-3030a0443ecbe2e1b018

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/7845de5c-6d65-43d4-b6cb-b22158151263/Supplier+Value+Integration.png?format=2500w

 

Hover Over: #block-a93da472feff72814900

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/f69c7a08-f0be-4e26-b2e5-ee785a19fddb/Capacity+Management.png?format=2500w

 

Hover Over: #block-599b4b41ffb9a29e23bc

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/e4c42dc6-291e-4030-bc98-8b270b3ec8be/Org.png?format=2500w

 

Hover Over: #block-2dd5ca0c8645b8efeeaa

Change Image: https://images.squarespace-cdn.com/content/v1/65d2162f69983e7baa7b9210/944e0f6b-ad00-480a-a820-707f44cdf574/Collaboration.png?format=2500w

Edited by craftlean
Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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.