(Squarespace) How to target Specific Gallery Grid

[tuanphan]

To target specific gallery grid, you can use these ways.

#Option 1. Use Spacing

First, set Spacing a value like this, for example: 16

Next, you can target it with this ID:

div.gallery-grid[data-props*='"gutter": 16']

For example, to make image zoom on hover, we can use ID with CSS code like this.

div.gallery-grid[data-props*='"gutter": 16'] {
   img {
      transition: all 0.3s ease;
   }
   figure:hover img {
      transform: scale(1.2);
      transition: all 0.3s ease;
   }
}

#Option 2. Use First Image Caption

First, enable Gallery Caption

Next, edit first image > Enter this syntax.

<em class="grid01"></em>

Next, you can target it with ID like this:

section.page-section:has(.grid01)

For example, use code to change image opacity on hover.

section.page-section:has(.grid01) {
    figure:hover img {
        opacity: 0.5;
    }
}