Background Image Revealed when Hovering Links

Site URL: https://bison-alligator-8yys.squarespace.com/home

Hello,

I'm trying to set up my personal website, with a few creative projects.

For my homepage, I need to have a solid color background (Black for example) with a few links. When you hover over the links the background should change accordingly. I managed to create something like this using the Portfolio section/page, by selecting the 'Hover: Background' format (check it in the link below):

https://bison-alligator-8yys.squarespace.com/home

Password: kontradiction

However, since I don't want to be limited by the Portfolio Page system (for example, in the future I might want to delete some links, and using the Portfolio method I'd have to duplicate each project manually in order to keep them archived in some other section of the website) I need to achieve this using any other method, such as a full-width gallery image/slideshow that allows me to upload the images and choose the links' url-slugs myself.

Note:
I do very much enjoy the 'Hyphen' division style, so I'd like to keep it as the links' separation method.

Please check the examples below, notice how the entire website's background changes when you hover over the links:

https://rb4.squarespace.com/

OR

https://www.kelseyeaton.com/

Thanks in advance!

Hi. Will you use Personal or Business or Commerce Plan?

Hello,

I intend to use either Personal or Business. But I believe the Business plan will be most useful since it will allow CSS and Javascript customisation correct?

I'm planning on activating either one of those tomorrow.

Thanks!

On 5/26/2021 at 10:16 AM, tuanphan said:

Hi. Will you use Personal or Business or Commerce Plan?

Hello @tuanphan! 

I've subscribed the business plan, can you help with this issue?

Thanks!

On 5/31/2021 at 12:05 AM, Jibz said:

Hello @tuanphan! 

I've subscribed the business plan, can you help with this issue?

Thanks!

Hi. Sorry for the delay. Now I had time to test some code. You mean this effect?

Link: https://tuanphan.squarespace.com/link-hover-background-change?noredirect&password=abc

Pass: abc

Use Text Block + Code Block

Hi what is the code / how do you implement the example you posted here: 

https://tuanphan.squarespace.com/link-hover-background-change?noredirect&password=abc

Thanks! 

On 6/4/2021 at 10:46 AM, tuanphan said:

Hi. Sorry for the delay. Now I had time to test some code. You mean this effect?

Link: https://tuanphan.squarespace.com/link-hover-background-change?noredirect&password=abc

Pass: abc

Use Text Block + Code Block

Hey @tuanphan,

Thanks for the reply, I visited the link you sent but the background doesn't change when you hover the 'Text Link 01' '... 02' and '...03'.

I just need to mimic the following page:

https://bison-alligator-8yys.squarespace.com/

This page is a 'Portfolio' page containing a full-width Projects section with the 'Hover: Background' layout. I need it to be a regular Gallery reel or something similar, otherwise I need to manually replicate every project page in my portfolio as a normal page.

Thanks in advance!

20 hours ago, Jibz said:

Hey @tuanphan,

Thanks for the reply, I visited the link you sent but the background doesn't change when you hover the 'Text Link 01' '... 02' and '...03'.

I just need to mimic the following page:

https://bison-alligator-8yys.squarespace.com/

This page is a 'Portfolio' page containing a full-width Projects section with the 'Hover: Background' layout. I need it to be a regular Gallery reel or something similar, otherwise I need to manually replicate every project page in my portfolio as a normal page.

Thanks in advance!

 

I see the background change here. You can check again.

You can use Project Page, then we can give the code to change project url

6 hours ago, tuanphan said:

I see the background change here. You can check again.

You can use Project Page, then we can give the code to change project url

That's quite strange, I can only see the background-change effect while clicking (not hovering) the links in the browser's 'inspect' mode.

However, if we could use the project page and change the URLs associated to each text link (ex. the project 'wired portugal' redirects to page 'x') it would work perfectly.

Any idea on how to get that working?

Thanks!

17 hours ago, Jibz said:

That's quite strange, I can only see the background-change effect while clicking (not hovering) the links in the browser's 'inspect' mode.

However, if we could use the project page and change the URLs associated to each text link (ex. the project 'wired portugal' redirects to page 'x') it would work perfectly.

Any idea on how to get that working?

Thanks!

Hi. You can add portfolio page first, then share url. Then we will check & give the code to change links url