Jump to content

Background Image Revealed when Hovering Links

Recommended Posts

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!

Link to comment
  • Replies 9
  • Views 683
  • Created
  • Last Reply

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.