Gallery Blocks

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors:  

Squarespace Element Description
Gallery Block Elements Refers to gallery block elements of all different gallery block layouts.
Gallery Lightbox Elements CSS does not allow us to modify elements inside of HTML iframe elements. Since the lightbox is inside of an iframe HTML element, we cannot write CSS that will apply to these elements.

CSS Code Snippets for Customizing Gallery Blocks

Add overlay hover effect to gallery links

For these code snippets to work, the gallery grid items MUST HAVE CLICK-THROUGH LINKS OR BE LIGHTBOX IMAGES.

 

Use this snippet to apply to all gallery block items:

/* Gallery Grid Link Mouse Over */
.sqs-block-gallery .sqs-gallery-block-stacked a {
  display: block;
}
.sqs-block-gallery .sqs-gallery-container {
  //Variables
  @overlay_Background: rgba(0,0,0,.6);
  @overlay_ContentText: "View Project";
  @overlay_ContentTextColor: #ffffff;
  @overlay_ContentTextSize: 1.4em;
  @overlay_MobileContentTextSize: 1em;
  @overlay_MobileContentTextColor: #ffffff;
  @overlay_MobileBackground: #000000;

  .sqs-gallery-design-strip-slide {
    margin-right: 5px;
  }
  a[href] {
    position: relative;
    cursor: pointer !important;
  }
  a[href]:not(.previous, .next):after {
    content: "";
    width: 100%;
    height: 100%;
    background: @overlay_Background;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s ease 0s;
    -webkit-transition: opacity .2s ease 0s;
    -moz-transition: opacity .2s ease 0s;
    -o-transition: opacity .2s ease 0s;
  }
  a[href]:not(.previous, .next):before {
    content: @overlay_ContentText;
    color: @overlay_ContentTextColor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    font-size: @overlay_ContentTextSize;
    text-align: center;
    white-space: nowrap;
    transition: opacity .2s ease 0s;
    -webkit-transition: opacity .2s ease 0s;
    -moz-transition: opacity .2s ease 0s;
    -o-transition: opacity .2s ease 0s;
    opacity: 0;
  }
  a[href]:not(.previous, .next):hover:before, a[href]:not(.previous, .next):hover:after {
    opacity: 1;
  }
  @media screen and (max-width: 769px) {
    a[href]:not(.previous, .next):before {
      opacity: 1;
      font-size: @overlay_MobileContentTextSize;
      background: @overlay_MobileBackground;
      color: @overlay_MobileContentTextColor;
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      top: initial;
      left: 0;
      bottom: 0;
      transform: initial;
    }
    a[href]:not(.previous, .next):after {
      display: none;
    }
  }
}
/* Gallery Grid Link Mouse Over */

Use this snippet to apply to a specific gallery block. You’ll need to replace the block ID used below with your own:

/* Gallery Grid Link Mouse Over */
#block-654d58d9c9cc34a6aa784dc4 .sqs-gallery-block-stacked a {
  display: block;
}
#block-654d58d9c9cc34a6aa784dc4 .sqs-gallery-container {
  //Variables
  @overlay_Background: rgba(0,0,0,.6);
  @overlay_ContentText: "View Project";
  @overlay_ContentTextColor: #ffffff;
  @overlay_ContentTextSize: 1.4em;
  @overlay_MobileContentTextSize: 1em;
  @overlay_MobileContentTextColor: #ffffff;
  @overlay_MobileBackground: #000000;

  .sqs-gallery-design-strip-slide {
    margin-right: 5px;
  }
  a[href] {
    position: relative;
    cursor: pointer !important;
  }
  a[href]:not(.previous, .next):after {
    content: "";
    width: 100%;
    height: 100%;
    background: @overlay_Background;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .2s ease 0s;
    -webkit-transition: opacity .2s ease 0s;
    -moz-transition: opacity .2s ease 0s;
    -o-transition: opacity .2s ease 0s;
  }
  a[href]:not(.previous, .next):before {
    content: @overlay_ContentText;
    color: @overlay_ContentTextColor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    font-size: @overlay_ContentTextSize;
    text-align: center;
    white-space: nowrap;
    transition: opacity .2s ease 0s;
    -webkit-transition: opacity .2s ease 0s;
    -moz-transition: opacity .2s ease 0s;
    -o-transition: opacity .2s ease 0s;
    opacity: 0;
  }
  a[href]:not(.previous, .next):hover:before, a[href]:not(.previous, .next):hover:after {
    opacity: 1;
  }
  @media screen and (max-width: 769px) {
    a[href]:not(.previous, .next):before {
      opacity: 1;
      font-size: @overlay_MobileContentTextSize;
      background: @overlay_MobileBackground;
      color: @overlay_MobileContentTextColor;
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      top: initial;
      left: 0;
      bottom: 0;
      transform: initial;
    }
    a[href]:not(.previous, .next):after {
      display: none;
    }
  }
}
/* Gallery Grid Link Mouse Over */

Add a small margin between carousel slides and slideshow thumbnails

//Start: Add a small margin between carousel slides and slideshow thumbnails
.sqs-gallery-design-strip-slide {
  margin-right: 5px;
}
//End: Add a small margin between carousel slides and slideshow thumbnails

Make gallery block grids 1 column on mobile

//Start: Make gallery block grids 1 column on mobile
@media screen and (max-width: 500px) {
  .sqs-gallery-design-grid .sqs-gallery-design-grid-slide {
    float: initial;
    width: 100% !important;
  }
}
//End: Make gallery block grids 1 column on mobile

Add margin-bottom between stacked gallery images (with captions) and set custom font size

//Start: Add margin-bottom between stacked gallery images, and custom description font size
.sqs-gallery-block-stacked {
  .meta-description {
    font-size: 1.5em;
  }
  .image-wrapper:not(:first-child) {
    margin-top: 80px;
  }
}
//End: Add margin-bottom between stacked gallery images, and custom description font size
Previous

Auto Layout Sections
Next

Summary Blocks