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: