[Share] Hover Text – Change Section Image

Description: Hover text – Change section image background

• Demo: https://tuanphan-demo01.squarespace.com/hover-text-change-site-background?noredirect
• Pass: abc

If code doesn't work, you can comment below, I will check again

#1. Add a Text Block with some links, something like this.

In my example, we will have

• Design – /design
• Digital Marketing – /digital-marketing
• Content Marketing – /content-marketing
• Brands – /brands

#2. Edit Section > Add a background image

We will have this

#3. Find Section ID.

In my example, we have

section[data-section-id="67087bc70d2b37611b5add5f"]

#4. Use this code to Custom CSS box

section[data-section-id="67087bc70d2b37611b5add5f"] {
    &:has(a[href="/design"]:hover) .section-background img {
        content: url(https://cdn.pixabay.com/photo/2023/11/28/21/35/ural-owl-8418249_1280.jpg);
    }
    &:has(a[href="/content-marketing"]:hover) .section-background img {
        content: url(https://cdn.pixabay.com/photo/2023/03/14/23/55/darling-7853389_1280.jpg);
    }
    &:has(a[href="/digital-marketing"]:hover) .section-background img {
        content: url(https://cdn.pixabay.com/photo/2024/03/25/17/19/art-8655200_1280.jpg);
    }
    &:has(a[href="/brands"]:hover) .section-background img {
        content: url(https://cdn.pixabay.com/photo/2023/04/28/18/18/mountains-7957191_1280.jpg);
    }
}

#5. Replace Pixabay in code with your desired image url.

#6. Replace Text Link in code with link you added to text (url you have in #3)

Update: In case you want to add smooth transition, you can follow these new guides

#1. Same as #1 above. But in my example, I will use Heading 2 text

#2. #3. Same.

But you need to find Text Block ID + Section ID. In my example, it is

div#block-fc422e1e9fd134974216

and

section[data-section-id="670f0db35ae020058529776a"]

#4. Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    const imageLinks = [
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729043394147-06HF1YTDV1QFRXR3M8HN/Service-1.jpg?format=2500w',
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729042909175-96FKHCCG9152ILQE525Y/Service-2.png?format=2500w',
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729042982540-FWB8TR4YC6FQ0DSCQATR/Service-5.png?format=2500w',
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729043116608-7TRY9BMRWU738YOO26CE/Service-4.png?format=2500w',
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729043024024-XGDL41KHMVNK6X75XT33/Service-6.png?format=2500w',
        'https://images.squarespace-cdn.com/content/v1/66ac2be15b396d65fc2498ab/1729043074866-LFKPG857RMZMDK893MX7/Service-3.png?format=2500w'
    ];

      $('#block-fc422e1e9fd134974216 h2').each(function(index) {
        $(this).hover(function() {
            const img = $('section[data-section-id="670f0db35ae020058529776a"] img');
            img.css('opacity', '0');
            setTimeout(function() {
                img.attr('srcset', imageLinks[index]);
                img.css('opacity', '1');
            }, 500);
        });
    });
});

</script>
<style>
div#block-fc422e1e9fd134974216 h2 {
    margin: 0px;
}
  section[data-section-id="670f0db35ae020058529776a"] img {
    transition: opacity 0.9s ease;
    opacity: 1;
}
</style>

#5. Remember to replace Image URL

and replace ID

Update: if you want video appears when users hover text, you can follow these

#1. First, you need to add a Section with Video Background

Next, add some text. Here I will use Heading 2 (If you use other headings, you will need to change h2 in the code to another h tag)

#2. Next, find ID of Text Block and Section.

• Text Block: #block-yui_3_17_2_1_1732588943338_19608
• Section: section[data-section-id="674540100be7b633aedb833e"]

#3. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    const videoLinks = [
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4'
    ];
    $('#block-yui_3_17_2_1_1732588943338_19608 h2').each(function(index) {
        $(this).hover(function() {
            const video = $('section[data-section-id="674540100be7b633aedb833e"] video');
            video.css('opacity', '0');
            setTimeout(function() {
                video.attr('src', videoLinks[index]);
                video[0].load(); // Tải lại video mới
                video.css('opacity', '1');
            }, 500);
        });
    });
});
</script>
<style>
section[data-section-id="674540100be7b633aedb833e"] video {
    transition: all 0.3s ease;
  
}
</style>

#4. Replace Video URL/ID in the code