Disable hover over effect

Solved
DavidStephens
Tourist
20 0 1

Hello Shopify Community,

I've been trying to figure out how to disable the hover-over effect myself through previous posts, but no luck.

Hopefully someone in the community can help.

I believe I have to find the original CSS and edit it, but I bought a template through ThemeForest and cannot find it.

I'd like to disable the hover-over effect.  That's all.  Nothing else special (for now).  Screenshot attached.
Our website is: miriamjoyeria.com

hover-over.png

Accepted Solution (1)

Accepted Solutions
Guleria
Shopify Partner
1851 397 563

This is an accepted solution.

Hello David,

Add this style-main.scss.css

.product .img-product .img-product-hover {
    display: none;
}

And if you also want to hide hover icons, add this too

.product-item-v2 .product-icon-action {
    display: none;
}
Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal

View solution in original post

Replies 10 (10)
Guleria
Shopify Partner
1851 397 563

This is an accepted solution.

Hello David,

Add this style-main.scss.css

.product .img-product .img-product-hover {
    display: none;
}

And if you also want to hide hover icons, add this too

.product-item-v2 .product-icon-action {
    display: none;
}
Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
Buy me a coffee ☕ My PayPal

View solution in original post

DavidStephens
Tourist
20 0 1

Guleria,

 

Thank you so much.  This was so easy, but very difficult for me to do by myself.

Accepted as solution.

DouglasNelson
New Member
1 0 0

This worked - THANKS! 

There was an additional issue - the hovering continued in the search screen. I removed this by removing lines: 51 & 52 of Search.template.liquid

 

<div class="{% if section.settings.article-hover-effect == 'zoom' %}collection-image--zoom-effect {% endif %}">
<div class="zoom-effect--inner">

 

I have NO IDEA if there are other repercussions - but it seems to have worked 

Jackie_Morales
Tourist
6 0 1

Hello, would anyone be able to help me get rid of the hover effect for products. Right now, when I hover over products, it shows the available sizes. I would like to get rid of that effect.

Here is URL for the site: https://monkpunk.com/

Thank you in advance!

Screenshot (79)_LI.jpg

suyash1
Shopify Partner
3743 410 612

@Jackie_Morales - add this to the very end of theme.scss file and check

@media screen and (min-width: 1200px){
.product-card:hover .available-size {display: none;}
}
You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
Jackie_Morales
Tourist
6 0 1

Hello again. It worked, but now when I hover over it, the price disappears. Is there a way to still keep the price on display while hovering?

suyash1
Shopify Partner
3743 410 612

@Jackie_Morales - add this

@media screen and (min-width: 1200px){
.product-card:hover .price__regular {display: block;}
}
You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
Jackie_Morales
Tourist
6 0 1

Amazing. Thank you, again.

suyash1
Shopify Partner
3743 410 612

@Jackie_Morales - welcome, if possible please do like the messages.

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30