Collection List: Remove zoom effect on hover

This code removes the zoom effect on hover when using the Collection List section module:

How to:

Code to add:

Add the following code to the very bottom of the file, make a couple blank lines and then add on a new line:

/* -- code to remove zoom effect on Collection List section  -- */
.collection-grid-item__link {
    border: none;
  &:hover,
  &:focus {
    .collection-grid-item__overlay{
      @include transform(scale(1));
    }
    .btn{
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    .home__title{
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
  }
}
.collection-grid-item__link {
  &:hover,
  &:focus {
    .btn--splash{
      background-color: darken($colorSplash, 0%);
    }
    .btn--outline{
      color: $colorHomeDark;
    }
  }
}
.collection-grid-item__content {
  .home__title{
    margin-bottom: 1em;
  }
  .home__title, .btn {
    @include transition(transform .0s ease-out);
  }
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us