Add an Overlay to Images on the Left and Right in a Gallery Reel

What does this code do?

This code snippet will allow you to add an image filter to the left and right of the focal image in a Gallery Reel in Squarespace 7.1.

Note: This code gives the effect of an overlay by darkening the images.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS.

This code adds a grayscale and brightness filter. For more image filters check out the options below.

/* Image Filter on Gallery Reel */
.gallery-reel-item:not([data-active="true"]) {
    -webkit-filter: brightness(10%) grayscale(80%);
    filter: brightness(70%) grayscale(80%);
  transition: filter 1s ease-in-out; /* fade the effect in and out */
}

More Filter Options

blur(px)

brightness(%)

contrast(%)

hue-rotate(deg)

invert(%)

opacity(%)

saturate(%)

sepia(%) 

How To Use It

1. Copy and paste the code snippet as indicated above.

2. Choose the filter(s) you would like to use. Make sure to use the unit indicated.

3. Customize the number to change the strength of the effect.