Changing hover product image

Solved
Tourist
5 0 0

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
Astronaut
1089 149 274

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

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
Tourist
5 0 0

Hi,

Thanks for replying so quickly!

 

Website URL: sxcript.com

Password: Coming-soon!

0 Likes

Success.

Astronaut
1089 149 274

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 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
Tourist
5 0 0

Hi Ninthony,

 

Thanks for the help I really appreciate it!!!

 

0 Likes