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: