How to remove the hover cursor line animation on homepage in Category Section

Store Design
1

Hi,

Tried everything, How to remove the hover cursor animation on the homepage on category icons.

URL - www.portronics.com

animation hoov.png
animation hoov.png1354×661 226 KB

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
.skrim-grid .skrim__item a.skrim__link .grid__image {
transform: none !important;
transition: none !important;
}

.skrim-grid .skrim__item a.skrim__link .grid__image:before, .skrim-grid .skrim__item a.skrim__link .grid__image:after {
display: none !important;
}
1 Like
3

It worked, Thanks. @ZestardTech

But I need hover bubble little zoom animation, the cursor animation animation is gone thats great.

And can you help me look like this with same animation as reference image for my category look.

homepage icons.PNG
homepage icons.PNG986×656 74.3 KB

url - www.mi.com

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.scss.css and paste this at the bottom of the file:
div#shopify-section-1543003878234 .page-width .skrim-grid {background: transparent;padding: 0;}

div#shopify-section-1543003878234 .page-width .skrim-grid .skrim__item {
    margin: 0  6px 12px;
}

div#shopify-section-1543003878234 .page-width .skrim-grid .skrim__item:hover {
    box-shadow: 0px 0px 5px 0px rgb(191 191 191 / 64%);
}
1 Like
5

Thanks @ZestardTech It worked.

Thankyou So much,

How can make it in slightly rounded Corners so it will look nice.

Thanks though @ZestardTech