(Squarespace) Grayscale to Colored images in Carousel (Section - Block)

Description

  • Gallery Block – Carousel
  • List People Section – Carousel

#1.Gallery Block Carousel
If code doesn’t work, you can comment below, message or send me an email.

Use this code to Custom CSS

div[data-block-json*="slider"] img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
div[data-block-json*="slider"] img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0); 
}

#2. List People Section Carousel

Use this code to Custom CSS

li.user-items-list-carousel__slide.list-item {
    pointer-events: initial;
}
li.user-items-list-carousel__slide.list-item img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
}
li.user-items-list-carousel__slide.list-item:hover img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0); 
}

1 Like

@tuanphan,

:heart: :heart: :heart: