How to crop Gallery Images in a Circle with Color Overlay

There are various options to use custom CSS to style the Gallery Block. Recently, we were asked to create a series of colored circles with a title centered in the middle. Then on hover, the solid circle would fade to reveal an image. The following is the general guideline that can be customized in various ways.

Step 1.

Add a Gallery Block to a page, add your images, titles to those images, etc... Then click the Grid Design option, Aspect Ratio "1:1 Square", the Crop Images checkbox and the Show Title checkbox.

Step 2.

Navigate to the Custom CSS page  /config/design/custom-css within your Squarespace site and paste the following CSS into the CSS area. The following code will apply this effect to any Gallery Block with a Grid design, so you may need to prefix the CSS with a Page ID, or a Block ID.

.sqs-gallery-block-grid {
    .slide {
        a.image-slide-anchor {
            border-radius: 50%;
            overflow: hidden;
            & + .image-slide-title {
                display: block;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                -ms-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                color: #fff;
                pointer-events: none;
            }
            img {
                opacity: 0.1 !important;
            }
            &:after {
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                background-color: #212121; //background color
                border-radius: 50%;
                -ms-transition: .5s;
                -moz-transition: .5s;
                -webkit-transition: .5s;
                transition: .5s;
                cursor: pointer;
            }
            &:hover {
                & + .image-slide-title {
                    display: none;
                }
                &:after {
                    opacity: 0;
                }
                img {
                    opacity: 1 !important;
                }
            }
        }
    }
}