Change background on hover

On 5/17/2022 at 12:28 PM, PatrickJ said:

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

No. You still able to use Text Block + Code to achieve this. 

It's just that Portfolio Pages are the fastest, so I usually suggest using Portfolio.

On 5/19/2022 at 7:34 PM, tuanphan said:

No. You still able to use Text Block + Code to achieve this. 

It's just that Portfolio Pages are the fastest, so I usually suggest using Portfolio.

Oh I see! In this case I can't use a Portfolio page, so I'd love to hear the Text Block + Code solution! 🙏🏽

30 minutes ago, PatrickJ said:

Oh I see! In this case I can't use a Portfolio page, so I'd love to hear the Text Block + Code solution! 🙏🏽

Like this?

https://tuanphan.squarespace.com/link-hover-background-change?noredirect

Pass: abc

I'd also love to hear this solution @tuanphan

My client is asking for a home page that features portfolio projects. When you hover over each link, it changes the background, AND she doesn't want to open a new page. She wants the links to go to a lightbox or open the project info and images when you click. 

On 5/21/2022 at 1:59 AM, tuanphan said:

Like this?

https://tuanphan.squarespace.com/link-hover-background-change?noredirect

Pass: abc

Hey @tuanphan, hovering over the text links in your demo doesn't seem to be doing anything (might be broken), but from the title of the page, I think you have the right idea!

On 5/26/2022 at 8:55 AM, JAIRUS said:

I'd also love to hear this solution @tuanphan

My client is asking for a home page that features portfolio projects. When you hover over each link, it changes the background, AND she doesn't want to open a new page. She wants the links to go to a lightbox or open the project info and images when you click. 

You can share link. We can give code easier

19 hours ago, PatrickJ said:

Hey @tuanphan, hovering over the text links in your demo doesn't seem to be doing anything (might be broken), but from the title of the page, I think you have the right idea!

It works to me. You try checking again

https://www.loom.com/share/2720a7795881473c8f7c5277d164a7b9

On 5/28/2022 at 8:34 PM, tuanphan said:

You can share link. We can give code easier

It works to me. You try checking again

https://www.loom.com/share/2720a7795881473c8f7c5277d164a7b9

Yeah perfect! That's the exact effect I'm looking for - it'd be even better there's a way to have the background be playable videos (lol), but no worries if not, I know that's a way bigger ask 😂

On 5/30/2022 at 11:48 AM, PatrickJ said:

Yeah perfect! That's the exact effect I'm looking for - it'd be even better there's a way to have the background be playable videos (lol), but no worries if not, I know that's a way bigger ask 😂

I thought I wrote that code. Until I checked the Page Header, it was the code that I hired a dev to write 2 years ago.

First, add a Text Block with 3 Text Links

Next, add to Page Header. Replace #block-37c with Text Block ID. Replace example image urls with new image urls

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const imgs = "https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1589847937255-KL7YQ0FH2JWUFSKWI0FI/ke17ZwdGBToddI8pDm48kDyrkv0xh0UZB45eZfCeHJZ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UYA7hnDto0DZHzMmH7D5yxh0gmfs6GbscUE7FWidc8Cg0PgRfuafvOMwlzZcOCnxVw/20140301_Trade-151_0124-copy.jpg,https://cdn.pixabay.com/photo/2020/11/08/09/41/deer-5723225__340.jpg,https://cdn.pixabay.com/photo/2020/11/01/19/41/autumn-5704791__340.jpg"
$(document).ready(function() {
    if (imgs) $('.section-background img').attr('data-url', imgs)
    const urls = $('.section-background img').attr('data-url').split(',')
    $('.section-background img').attr('src', urls[0])
    $('#block-cc917afadc9c70cdd37c a').each(function(id, e) {
        $(e).hover(function() {
            $('.section-background img').attr('src', urls[id])
        })
    })
})
</script>

Use this tool to find block id.

Hello everyone! I am trying to create an effect on the HOMEPAGE, where I hover over a background image, and the image changes from B&W to Color. I imagine there's a way to input both images, and have the color version appear upon hovering? Can anyone help me with this?

Thank you so much!
 

15 hours ago, rdeleon said:

Hello everyone! I am trying to create an effect on the HOMEPAGE, where I hover over a background image, and the image changes from B&W to Color. I imagine there's a way to input both images, and have the color version appear upon hovering? Can anyone help me with this?

Thank you so much!
 

If you share link to homepage, we can help easier

Just catching up on the above is there a way when hovering (using portfolio option) the links don't go anywhere. My client wants to able able to hover over a list of projects and one image show rather than linking through to somewhere.

16 hours ago, HannahLee2511 said:

Just catching up on the above is there a way when hovering (using portfolio option) the links don't go anywhere. My client wants to able able to hover over a list of projects and one image show rather than linking through to somewhere.

You can share link to this page, we can give code to turn links to custom url

Hello everyone! Did we manage to get an ideal solution with this? 🙂 Thank you! 
 

Would love to be able to do this on our website. Similar to the website https://a24films.com/ 

Thank you!

Alex 

6 hours ago, alexgnz said:

Hello everyone! Did we manage to get an ideal solution with this? 🙂 Thank you! 
 

Would love to be able to do this on our website. Similar to the website https://a24films.com/ 

Thank you!

Alex 

Just checking this with you @tuanphan 

13 hours ago, alexgnz said:

Hello everyone! Did we manage to get an ideal solution with this? 🙂 Thank you! 
 

Would love to be able to do this on our website. Similar to the website https://a24films.com/ 

Thank you!

Alex 

Yes. This is possible. I used to solved a case a few weeks ago. You can share link to portfolio page on your site, we can give the exact code

Yes! 🙂 Please let me know how I can do this?

Thank you!

Alex

On 8/3/2023 at 3:16 AM, alexgnz said:

Yes! 🙂 Please let me know how I can do this?

 

Thank you!

Alex

You can share link to portfolio page on your site, we can give the exact code

All solved 🙂 Thank you! 

@tuanphan trying to get your code to wrote above (on May 31, 2022) but definitely doing something wrong. Can you help? Same text hover to reveal background over key text e.g. "Apple", "Malibu Farm" and it's corresponding thumbnail appears as the background behind. Site here: https://hen-cricket-6swt.squarespace.com/config/pages

13 hours ago, gmw_612 said:

@tuanphan trying to get your code to wrote above (on May 31, 2022) but definitely doing something wrong. Can you help? Same text hover to reveal background over key text e.g. "Apple", "Malibu Farm" and it's corresponding thumbnail appears as the background behind. Site here: https://hen-cricket-6swt.squarespace.com/config/pages

What is password?

Oop! Pass is hello

20 hours ago, gmw_612 said:

Oop! Pass is hello

I wrote a quick guide here, you try follow. If you still can't do it, I will do an example for your case

On 8/18/2023 at 10:36 AM, tuanphan said:

I wrote a quick guide here, you try follow. If you still can't do it, I will do an example for your case

Hey Tuanphan,

Is there a way to add a transition speed to this? I am thinking around 0.3 seconds.

Thank you!

On 8/23/2023 at 5:24 PM, bycrawford said:

Hey Tuanphan,

Is there a way to add a transition speed to this? I am thinking around 0.3 seconds.

Thank you!

I added some transition code. You try checking demo again

1 hour ago, tuanphan said:

I added some transition code. You try checking demo again

yes, that's great! How do we apply that?