squarespace 7.1 CSS CODE WORKS for Masonry gallery (image grow on hover)

Please see the attached video. Here you can see that when you hover over each image, the image falls back very fast. 

This css code works for squarespace 7.1 (masonry gallery image grow on hover) 

The zoom scaling needs a tweak or two. I need help in the css to make the image hover more smoothly when hovering over each image. 

/* masonry-gallery-image-grow-on-hover sqs.7.1  */

.gallery-masonry-wrapper :hover img {
               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;
             }
            .gallery-masonry-wrapper :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.1) ;
                       transform: scale(1.5) ;
             }

            // end

transition: all ease-in 0.5s;

Hey tuanphan

Thanks for your reply. Dont know where to implement the transition: all ease-in 0.5s; in my css?  I´m kinda new to the whole css thing. 

Please see the attached video. Here you can see that when you hover over each image, the image falls back very fast. 

.gallery-masonry-wrapper  img {transition: all 0.75s;}

AWESOME !!!! Thanks. 

here is the updated CSS

/* masonry-gallery-image-grow-on-hover sqs.7.1  */

.gallery-masonry-wrapper {transition: all 0.75s;} :hover img {
               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;
             }
            .gallery-masonry-wrapper  :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.1) ;
                       transform: scale(0.9) ;
             }

            // end

Hey,

Thank you so much for this, works perfect! 

Is there anyway to have this applied to desktop only, and not hover when viewing mobile device.

Also, when you click on one image all the other images seem to animate when being directed to image clicked url.

17 hours ago, nickbarr said:

Hey,

 

Thank you so much for this, works perfect! 

Is there anyway to have this applied to desktop only, and not hover when viewing mobile device.

Also, when you click on one image all the other images seem to animate when being directed to image clicked url.

@media screen and (min-width:768px) {
paste all above code here
}

Thank you!

Sorry to be an amateur, not sure where it '@media screen' code should go?

Also notice that if the hover thumbnails link to smaller images in a gallery they will not grow.

Last question, when you grow the images and click on an image, all the images will grow for a split second, anyway around that?

/* masonry-gallery-image-grow-on-hover sqs.7.1  */

.gallery-masonry-wrapper :hover img {
               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;
             }
            .gallery-masonry-wrapper :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.0) ;
                       transform: scale(1.02
                       ) ;
             }
.header-nav-item a:hover {
    color: grey !important;
}

16 hours ago, nickbarr said:

Thank you!

 

@media screen and (min-width:768px) {
/* masonry-gallery-image-grow-on-hover sqs.7.1  */
.gallery-masonry-wrapper :hover img {
               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;
             }
            .gallery-masonry-wrapper :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.0) ;
                       transform: scale(1.02
                       ) ;
             }
.header-nav-item a:hover {
    color: grey !important;
}
}

hey all.  Loved this in 7.0.  i am having issues with this though.  The hover effect works fine and i have had this applied to all my gallery blocks for a few years.  The issue i am having is it doesnt remain within the container.  The hover effect completely transforms the container to a higher or lower scale, where all i want is the image to transform within the container.  

I have it working on my live 7.0 website and have tried it many different ways.  Any help would be greatly appreciated.

On 6/4/2020 at 12:55 AM, John1490 said:

hey all.  Loved this in 7.0.  i am having issues with this though.  The hover effect works fine and i have had this applied to all my gallery blocks for a few years.  The issue i am having is it doesnt remain within the container.  The hover effect completely transforms the container to a higher or lower scale, where all i want is the image to transform within the container.  

 

I have it working on my live 7.0 website and have tried it many different ways.  Any help would be greatly appreciated.

If you share link to gallery page, we can check easier.