Jump to content

CSS Grow Effect on Grid Only (Not Stacked Gallery)

Recommended Posts

Site URL: https://agicreative.com/info/team

Site Password: password

I have implemented CSS for a grow hover effect on gallery images. Is there any way to disable it on stacked gallery and keep it on grid gallery. Or is there a way to disable on a specific page? The URL above is the page I want to disable this effect on.

I am using code from this source: CSS FOR GROW HOVER EFFECT ON GALLERY THUMBNAILS

/*GROW HOVER EFFECT FOR GALLERY THUMBNAIL IMAGES*/

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);

}

 

Link to comment
  • Replies 2
  • Views 643
  • Created
  • Last Reply
18 minutes ago, tuanphan said:

Can you share link to grid gallery?

I solved it with this:

/* GROW HOVER EFFECT FOR GRID GALLERY THUMBNAIL IMAGES */
body:not(#collection-5cc0a76ff9619a3b91f66409) {
  .sqs-gallery-design-grid-slide .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.5s;
            transition-duration: 0.5s;
    -webkit-transition-property: transform;
            transition-property: transform;
  }

  .sqs-gallery-design-grid-slide:hover .thumb-image {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.