Hover Image – Change Section Color

#1. First, install Squarespace ID Finder and find the ID of Section + 3 Image Blocks.

In my example, we will have:

• Section ID: section[data-section-id=”666a42851200fa07fc56349d”]
• Image Blocks: #block-yui_3_17_2_1_1718239835998_39371, #block-yui_3_17_2_1_1718239835998_40462, #block-yui_3_17_2_1_1718239835998_39867

#2. Use this code to Custom CSS box

/* Image 01 */
section:has(#block-yui_3_17_2_1_1718239835998_39371:hover) {
  .section-background, .section-border {
    background-color: #f1f !important;
  }
}
/* Image 02 */
section:has(#block-yui_3_17_2_1_1718239835998_40462:hover) {
  .section-background, .section-border {
    background-color: green !important;
  }
}
/* Image 03 */
section:has(#block-yui_3_17_2_1_1718239835998_39867:hover) {
  .section-background, .section-border {
    background-color: #f1f2f3 !important;
  }
}