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)