# Hover Text – Change Background Image

**URL:** https://community.elfsight.com/t/hover-text-change-background-image/65271
**Category:** Platform Tips
**Tags:** squarespace
**Created:** [August 11, 2024, 3:07am UTC](https://community.elfsight.com/t/hover-text-change-background-image/65271 "2024-08-11T03:07:10Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)
#### Post date: [August 11, 2024, 3:07am UTC](https://community.elfsight.com/t/hover-text-change-background-image/65271/1 "2024-08-11T03:07:10Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/3/a35bc3cc1def0c42e32ce2947fbfa0705140111a.jpeg)

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

**#1.** First, use [**Squarespace ID Finder**](https://summaryblock.com/tools/check-block-id) to find Section ID. In my example, we will have:

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/1/61d24286d417b5da6afaf56a6f69de20a9ace64f.jpeg)

#2. Use this code to Custom CSS box

```auto
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);
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/f/cf11a611ea64eee4250048663f4ccfe9d2c9cd60.png)