How can I add a hover effect to product images in the Brooklyn Theme?

Technical Q&A
1

Hello

I am using Brooklyn Theme and I would like to add the hoover effect in my photos

how can I do that ?

thanks :smiling_face:

2

Hi @Guardarobastyle ,

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 @Guardarobastyle ,

I am Anni From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

-Kindly Provide your Store URL

Note: If your store is protected with ‘store Font password’ please Send it here or DM me.

If you have any concerns feel free to ask me!

Regards,
Anni

4

Hi @Guardarobastyle ,

Please share your store URL and if your store is password protected then please provide password too. And you want to hover, what kind of effect?

So that we can help you.

Thank you.

5

Hi** @Guardarobastyle **Welcome to our Shopify Community!

I see that you are trying to add a hover effect to your photos using the Brooklyn Theme. Would you be able to expand more on what you mean by a hover effect? My understanding is that you want your photos to show an alternative image, once the mouse is hovered over your photo. Is this correct?

We currently do not have a feature on the platform that allows you to do this, but recommend looking into third party apps. I have listed below a few apps that can be found on our Shopify App Store that may help you customize your photos with a hover effect.

Collection Hover Image Slider
Second Image On Hover
Product Page Slider & Gallery

I do want to mention that these third party apps are supported individually by their own app developers, and so if you have any questions regarding the app, I’d recommend you to reach out directly to the developers by going to the Support Tab found on each app page.

Lastly, I would like to share with you our Help Doc on what is customizable on our Brooklyn Theme. Depending on what you are looking to customize, you may be eligible for our Theme Support so feel free to take a look at our Shopify Design Policy when you have time!