GridGallery3.gif

Grid Gallery 3

Add a hover-over zoom / overlay with animated 'fade' 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 1: 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 useeither 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 3 CSS */

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 1  
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 40%;
    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 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    z-index:99999999999;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: #ffffff!important;
    padding: 10px;
  }
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection:

 

 

Step 2: 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.