Brooklyn Theme - Product image shade when mouse hovers over image

Technical Q&A
1

In order to make it more obvious for our clients that a product image in the homepage is clickable to take them to that specific product page, I would like the image to show a stronger white shade when the mouse hovers it. Currently, it shows a very, very slight discoloration but it is nearly impossible to see it. Please help me understand how I can make this change for the Brooklyn Theme. Thanks in advance!

2

Hi @Pametarium ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.grid-product__image-link:hover, 
.grid-product__image-link:focus{
	opacity: .5 !important;
}

Hope it helps!

3

Hi @Pametarium ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

It did! Thank you so much!

1 Like