Rollover - enlarge

http://www.pareto-design.com/the-blog/2016/4/19/squarespace-thumbnail-image-hover-effects

stick this code into the header of that specific page (page settings->advanced->page header code injection).

<style>
a img.thumb-image {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
       -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
   -webkit-transition-property: transform;
           transition-property: transform;
 }
 a img.thumb-image:hover,
 a img.thumb-image:active {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
</style>

Hover text edit

To change the HOVER text at bottom of gallery image.  Use Gallery collection number.

https://answers.squarespace.com/questions/35691/rollover-on-the-grid-gallery.html

#collection-57c654641b631be542fa3649 .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
display: block;
position: absolute;
top: auto;
right: 0;
bottom: 0;
left: 0;
padding: 1em;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out; }


.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
background: rgba(160,222,4,0.8); }
   
.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title {
font-family: proxima-nova;
font-size: 12px;
text-transform: uppercase;
letter-spacing:2px;
color: #fff;
opacity: 0; }
   
.sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title {
font-family: proxima-nova;
font-size: 12px;
text-transform: uppercase;
letter-spacing:2px;
color: #fff;
opacity: 1; }