GridGallery1.gif

Grid Gallery 1

Add an overlay hover style with animated 'bounce' titles using this Grid Gallery plugin on your Squarespace site. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Create a Grid Gallery

Insert a Gallery Block and set it to the 'Grid' style following our recommended settings:
 

Aspect Ratio - 1:1 Square
Crop Images -
Show Title -
Thumbnails Per Row - 2
Grid Padding - 20
Open Links in New Window -


Note: Ensure that you set the 'Image Title' to the text you want to show over the image on hover for each individual image.

 
 

 

Step 2: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design.

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8)  - optional opacity value '0.8'
  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!

 

Copy & paste this code:

/* GRID GALLERY STYLE 1 CSS */

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide{
    overflow: hidden;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    top: 40% !important
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover  img{
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide .image-slide-title{
    position: absolute;
    top: -50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    font-size: 50px !important;
    font-weight: 400 !important;
    color: white !important;
    padding: 10px;
  }
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection:

 

 

Step 3: Adjust title text style (optional)

To change the style of your image title text, find these lines in the code above and adjust the values to the ones you'd like!
 

font-size: 50px !important;
font-weight: 400 !important;
color: white !important;
 

⚡️ Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.