Change background on hover

Also looking for this answer

You can use Portfolio Page (add portfolio page > edit > Click Pencil icon > Choose layout: Hover: Background)

@tuanphan Is there another way to implement this on a specific page? 

I am trying to get this to work on my HP rather than one separate portfolio. 

Thanks! 

On 3/31/2021 at 2:23 AM, kcreative said:

@tuanphan Is there another way to implement this on a specific page? 

 

I am trying to get this to work on my HP rather than one separate portfolio. 

 

Thanks! 

 

 

Hi. Possibile. Do you still need help?

Can this be done on the landing page/homepage?

Hello, I would love help with this too! @dannyrothschild did you ever work this out? I think you are talking about the exact effect I am trying to achieve.

x

Has anyone found a solution for this?

Hello, I am also looking for a solution to this. I would like to create a section on my homepage similar to this website https://www.sebastiancox.co.uk/ . I would like the background image to change when hovering over the text, and then the clickthrough links to go to other portfolio pages on the website.

I see that it's possible to do it with the Hover effect in Portfolio section on 7.1, but I I don't want to have to build the whole website within one portfolio page. 

@tuanphan do you have any advice on this? 

Many thanks

Kimbal

23 hours ago, Kimbal said:

Hello, I am also looking for a solution to this. I would like to create a section on my homepage similar to this website https://www.sebastiancox.co.uk/ . I would like the background image to change when hovering over the text, and then the clickthrough links to go to other portfolio pages on the website.

I see that it's possible to do it with the Hover effect in Portfolio section on 7.1, but I I don't want to have to build the whole website within one portfolio page. 

@tuanphan do you have any advice on this? 

Many thanks

Kimbal

Hi,

The easiest way is use Portfolio Page. Then we will give the code to change portfolio items to custom url.

43 minutes ago, tuanphan said:

Hi,

The easiest way is use Portfolio Page. Then we will give the code to change portfolio items to custom url.

Ah I see, ok, fair enough, thanks @tuanphan. Can you please let me know how I can set a portfolio item as a custom URL? What code do I need for that? 

I am building a website that has 4 main sections (2 portfolios and 2 normal pages) So I'd like it that when you click the item on the home page it will directly link to those pages

Also, if I create a homepage with those 4 portfolio items, then this 'HOME' appears in my URL's for the website. But I just want the URL's to be www.website.com/pagename not www.website.com/home/pagename

Many thanks for your help! 

Kimbal

On 4/13/2022 at 5:03 PM, Kimbal said:

Ah I see, ok, fair enough, thanks @tuanphan. Can you please let me know how I can set a portfolio item as a custom URL? What code do I need for that? 

I am building a website that has 4 main sections (2 portfolios and 2 normal pages) So I'd like it that when you click the item on the home page it will directly link to those pages

Also, if I create a homepage with those 4 portfolio items, then this 'HOME' appears in my URL's for the website. But I just want the URL's to be www.website.com/pagename not www.website.com/home/pagename

Many thanks for your help! 

Kimbal

Hi,

Please share site url, we can give the exact code easier

On 4/15/2022 at 7:44 AM, tuanphan said:

Hi,

Please share site url, we can give the exact code easier

@tuanphan Hello, thank you very much. and Sorry for slow reply. My site is still under construction, but here is the demo url https://pigeon-sparrow-yjxp.squarespace.com/ 

I would like the Projects on the home page to link to the Projects section (https://pigeon-sparrow-yjxp.squarespace.com/projects), and the Paintings word to link to the Paintings section (https://pigeon-sparrow-yjxp.squarespace.com/painting).

Currently they are just linking to the blank portfolio pages on the home page. I would like the words to just forward directly to the relevant sections.

I do not want the Homepage to appear in my URL, nor in the Navigation bar. 

Many thanks for your help! :)

On 4/24/2022 at 8:20 PM, Kimbal said:

@tuanphan Hello, thank you very much. and Sorry for slow reply. My site is still under construction, but here is the demo url https://pigeon-sparrow-yjxp.squarespace.com/ 

I would like the Projects on the home page to link to the Projects section (https://pigeon-sparrow-yjxp.squarespace.com/projects), and the Paintings word to link to the Paintings section (https://pigeon-sparrow-yjxp.squarespace.com/painting).

Currently they are just linking to the blank portfolio pages on the home page. I would like the words to just forward directly to the relevant sections.

I do not want the Homepage to appear in my URL, nor in the Navigation bar. 

Many thanks for your help! 🙂

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('a.portfolio-hover-item[href="/home/painting"]').attr('href','/painting');
	$('a.portfolio-hover-item[href="/home/projects"]').attr('href','/projects');
});
</script>

@tuanphan you are an absolute star! thanks so much! 🤩

On 4/17/2021 at 2:12 AM, tuanphan said:

Hi. Possibile. Do you still need help?

Hey @tuanphan!

I still need help on this - can't use the Portfolio page solution, need to make a section like below on the following site, where changes the section background image when a user hovers over the text-image combo on the right...

Site: https://gar-parsnip-d2gg.squarespace.com 
Password: hello

On 5/3/2022 at 12:08 PM, PatrickJ said:

Hey @tuanphan!

I still need help on this - can't use the Portfolio page solution, need to make a section like below on the following site, where changes the section background image when a user hovers over the text-image combo on the right...

Site: https://gar-parsnip-d2gg.squarespace.com 
Password: hello

Can you share link to site in screenshot?

18 hours ago, tuanphan said:

Can you share link to site in screenshot?

This is a mockup from the designer, it's the effect they're looking to achieve.

On 5/3/2022 at 12:08 PM, PatrickJ said:

Hey @tuanphan!

I still need help on this - can't use the Portfolio page solution, need to make a section like below on the following site, where changes the section background image when a user hovers over the text-image combo on the right...

Site: https://gar-parsnip-d2gg.squarespace.com 
Password: hello

Can you share link to example site?

On 5/7/2022 at 6:17 AM, tuanphan said:

Can you share link to example site?

I don't have one unfortunately, all the client gave me is the above screenshot of the designer mockup. All I need is a way to change the section background image when a user hovers over/clicks the respective video link on the right.

@PatrickJ

I'm a little unclear here. You have only a mockup? Or, you have a working page and the only issue is how to get an image to change depending on the video being hovered/clicked? If it's the later can you point us to it?

On 5/2/2022 at 10:08 PM, PatrickJ said:

Hey @tuanphan!

I still need help on this - can't use the Portfolio page solution, need to make a section like below on the following site, where changes the section background image when a user hovers over the text-image combo on the right...

Site: https://gar-parsnip-d2gg.squarespace.com 
Password: hello

On 5/9/2022 at 2:39 PM, creedon said:

@PatrickJ

I'm a little unclear here. You have only a mockup? Or, you have a working page and the only issue is how to get an image to change depending on the video being hovered/clicked? If it's the later can you point us to it?

Correct, the above image is just a mockup from the designer, and I'm trying to figure out how to build that out as a section. Sorry if I'm not being clear enough!

@PatrickJ

Got it. None of the elements exist.

SS has no widgets like in the mockup and I'm unaware of any ready made code, so it isn't going to be an easy project. Have you perused places like codepen to see if you can find a text image selection widget like in the mockup that might be adapted to SS? That can be a challenge as codepen is not synonymous with SS plug-in.

The other consideration is how to populate the data in the text image widget? If data entry/maintenance is onerous and error prone that can get expensive.

This project would most likely need HTML, CSS, and JavaScript.

@creedon

Got it. Yeah, I've looked pretty extensively, but I know @tuanphan had mentioned this is possible without doing the Portfolio page method? All I need is some kind of effect that triggers a section background image change when hovering over a certain block.

On 4/17/2021 at 2:12 AM, tuanphan said:

Hi. Possibile. Do you still need help?

On 5/11/2022 at 8:54 PM, PatrickJ said:

@creedon

Got it. Yeah, I've looked pretty extensively, but I know @tuanphan had mentioned this is possible without doing the Portfolio page method? All I need is some kind of effect that triggers a section background image change when hovering over a certain block.

 

Is this in fact possible to do without a portfolio page, @tuanphan?