Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Winther

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

Question

Hello I need some help with the CSS.

 

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

 

 

Edited by Winther
Forgot to add video.

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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

Edited by Winther

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...