Solved

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

Shivam97
Trailblazer
165 0 63

Hi,

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

URL - www.portronics.com

animation hoov.png

 

Accepted Solution (1)

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 4 (4)

ZestardTech
Shopify Expert
5393 970 1291

This is an accepted solution.

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Shivam97
Trailblazer
165 0 63

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

url - www.mi.com

 

ZestardTech
Shopify Expert
5393 970 1291

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%);
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Shivam97
Trailblazer
165 0 63

Thanks @ZestardTech It worked. 

Thankyou So much,

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

Thanks though @ZestardTech