Add Overlay Hover Affect to Gallery Image Links

Gallery in Squarespace 7.0 and 7.1 allow you to add links to the gallery images, but unfortunately, there is no way to make it evident to the user that the image is a clickable link.

This CSS code snippet will allow you to add a sleek overlay hover effect on the gallery items with links, and it even has 4 customizable variables that you can customize.

Prerequisites:

• Must have a Squarespace 7.0 or 7.1 business plan since that is the most basic plan that will allow for custom code additions

• Some people want to know how to only apply the CSS to one specific Grid block. To acheive this, you must add the gallery block id selector before the class selector ".sqs-gallery-design-grid" in the code snippet. (Note: If you don’t know how to find the gallery block ID, I teach you how to find the block id of various Squarespace block elements this in the DevTools Minicourse, or you can just ask me and I’ll help you find it!).

CSS Code Snippet

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;

  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]: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;
    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):hover:before, a[href]:not(.previous, .next):hover:after {
    opacity: 1;
  } 
  @media screen and (max-width: 769px) {
    .sqs-gallery-block-stacked .image-wrapper {
      margin-bottom: 20px;
    }
    a[href]:not(.previous, .next):before {
      font-size: 1em;
      opacity: 1;
      background: #000000;
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      top: initial;
      transform: initial;
      bottom: 0;
    }
    a[href]:not(.previous, .next):after {
      display: none;
    }
    .sqs-gallery-design-strip-slide[href]:before {
      font-size: 1em;
    }
  }
}
/* 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-yui_3_17_2_1_1696874871805_4627 .sqs-block-gallery .sqs-gallery-block-stacked a {
  display: block;
}
#block-yui_3_17_2_1_1696874871805_4627 {
  //Variables
  @overlay_Background: rgba(0,0,0,.6);
  @overlay_ContentText: "View Project";
  @overlay_ContentTextColor: #ffffff;
  @overlay_ContentTextSize: 1.4em;

  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]: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;
    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):hover:before, a[href]:not(.previous, .next):hover:after {
    opacity: 1;
  } 
  @media screen and (max-width: 769px) {
    .sqs-gallery-block-stacked .image-wrapper {
      margin-bottom: 20px;
    }
    a[href]:not(.previous, .next):before {
      font-size: 1em;
      opacity: 1;
      background: #000000;
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      top: initial;
      transform: initial;
      bottom: 0;
    }
    a[href]:not(.previous, .next):after {
      display: none;
    }
    .sqs-gallery-design-strip-slide[href]:before {
      font-size: 1em;
    }
  }
}
/* Gallery Grid Link Mouse Over */