Changing background image by hovering over specific text block

Site URL: https://www.mcmainsmedia.com/home-1

I am trying to make some custom css code that allows me to change the background image by hovering over a certain text block. On this page (www.mcmainsmedia.com/home-1) when you hover over the text I currently have it set to just disappear. Instead, I would like the background image to change. I would like to be a white color when the user isn't hovering over any text (neutral/default) and then would like it to change to 1 of 4 different backgrounds depending on what text block the user is hovering over. 

I am making a larger photography portfolio and would like this to be the portal for my landscapes, concerts, sports, and journalism. So when someone hovers over the word "landscapes" a certain background image will fade in, then when they hover over "concerts" a different one will pop up, then if they move the cursor to the top left of the screen away from text a solid white (or black, don't care too much) appears instead. I would also like the images to have 30-40% overlays on top of them so the text still stands out.

I have figured out how to target specific blocks with hovering and I know how to upload a specific image as the background but I do not know how to combine the two so that they work together. 

This is a great example of what I am trying to accomplish: https://www.sebastiancox.co.uk/

I love that there is a default background and then the others fade in depending on what word is being hovered over.

Thanks!

Hi,

You mean this effect?

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

Pass: abc

I added a Blank Section with background Image

Next, add a Text Block with text links

Next, add this code to Page Header (will need to adjust text block id, image url with your site)

<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>

The effect doesnt work tuanphan - on your website atleast. But its the same currently with squarespace equivelant, portfolio pages - the same sort of effect doesnt work here either...atleast not for me. And i've tried firefox, edge, chrome - none display the effect. So im wondering if there's something wrong from SS's side.

On 8/3/2022 at 12:36 AM, MrScribble said:

The effect doesnt work tuanphan - on your website atleast. But its the same currently with squarespace equivelant, portfolio pages - the same sort of effect doesnt work here either...atleast not for me. And i've tried firefox, edge, chrome - none display the effect. So im wondering if there's something wrong from SS's side.

Fixed demo. (the server saved code expired)

Hi,   the effect isn't working on the sample site

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

Pass: abc

and I can't get it to work on mine either.  Are there any updates?

Just now, ZAM said:

Hi,   the effect isn't working on the sample site

 

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

Pass: abc

 

and I can't get it to work on mine either.  Are there any updates?

This is the page I want it for.  When I hover over each text box I want the entire backgorund to be a different colour.

On 6/30/2023 at 11:52 AM, ZAM said:

Hi,   the effect isn't working on the sample site

 

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

Pass: abc

 

and I can't get it to work on mine either.  Are there any updates?

It still works to me. Here I used Image, but you can design a colored image & add to the code

You can see this new guide

@tuanphan this works a treat. How would you animate/transition the change of background? I would like a smooth opacity change reveal.

The bottom of the page here will give an example of what I'm trying to achieve. The image just flashes up I would like to smoothly bring it in.

On 12/22/2023 at 4:30 AM, mrpower said:

@tuanphan this works a treat. How would you animate/transition the change of background? I would like a smooth opacity change reveal.

The bottom of the page here will give an example of what I'm trying to achieve. The image just flashes up I would like to smoothly bring it in.

Can you share link to page where you see an example? I don't see the link