Hover Text – Change Background Image

Suppose you have these texts. When hover on each text >> You want to change the section background image.

In this case, each text is Heading 1, so we can use these codes

#1. First, use Squarespace ID Finder to find Section ID. In my example, we will have:

section[data-section-id="6638c9b6a3e46a1339352fe1"]

#2. Use this code to Custom CSS box

section[data-section-id="6638c9b6a3e46a1339352fe1"]:has(h1:nth-child(1):hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2023/09/20/15/47/fish-8265114_1280.jpg);
}
section[data-section-id="6638c9b6a3e46a1339352fe1"]:has(h1:nth-child(2):hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2023/08/17/17/03/dahlia-8197027_1280.jpg);
}
section[data-section-id="6638c9b6a3e46a1339352fe1"]:has(h1:nth-child(3):hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2022/11/17/12/45/leaves-7597975_1280.jpg);
}
section[data-section-id="6638c9b6a3e46a1339352fe1"]:has(h1:nth-child(4):hover) .section-border img {
    content: url(https://cdn.pixabay.com/photo/2016/10/21/15/59/sun-1758348_1280.jpg);
}