Changing hover product image

Solved
Highlighted
Tourist
7 0 1

Hi,

 

I have some trouble with implementing a hoover effect on the product images.

I tried it using this link: https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images, but it looks like it does not work.

I also tried this: https://youtu.be/9uxSrOxxZpY, but the price did not show anymore and some other complications occurred.

 

What I want to do

I want to greyscale all the product images and on hoover (normal) colour image.

I also want to add a box shadow on hoover.

 

This is the code I want to use:

 

Code for the grey scaling

.products-grid .product-image img{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Code for the box shadow

.products-grid .item:hover .product-image img{
-webkit-box-shadow: 7px 7px 0px #962715;
box-shadow: 7px 7px 0px #962715;
}

 

The theme I am using is Debut. I would really appreciate it if someone could help me with this or point me in the right direction 😊

0 Likes
Highlighted
Shopify Partner
1445 195 521

can you post a link to your store and password if it's password protected?

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
7 0 1

Hi,

Thanks for replying so quickly!

 

Website URL: sxcript.com

Password: Coming-soon!

0 Likes
Highlighted
Shopify Partner
1445 195 521

This is an accepted solution.

You'll want to add this to the bottom of your theme.scss.liquid file:

 

 

.grid-view-item.product-card img {
filter: grayscale(100%);
box-shadow: 0 0 0 #962715;
transition: all .3s ease
}

.grid-view-item.product-card:hover img {
box-shadow: 7px 7px 3px #962715;
filter: grayscale(0);
}

.product-card:hover .product-card__image-wrapper,.product-card:focus-within .product-card__image-wrapper {
    opacity: 1;
}

 

 

The last style is to just unset your current hover effect. If you can find that earlier in the scss file you can just delete it. I gave your dropshadow a 3px spread cause I thought it looked a little weird just solid, but feel free to change it all to your liking.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
Tourist
7 0 1

Hi Ninthony,

 

Thanks for the help I really appreciate it!!!

 

0 Likes
Highlighted
New Member
1 0 0

Hi Ninthony,

I would like to add the greyscale effect to my store also.

Is there anyway you could help me out?

0 Likes
Highlighted
Shopify Partner
1445 195 521

Sure, can you post a link? Let me know where you want to apply the filter to.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes