How can I add a hover effect to the Brooklyn theme?

Technical Q&A
1

Hi,

I’ve tried looking through the forums, youtube, reddit and attempted to add hover function so that when the mouse hovers over, the 2nd image shows instead. However I could not do them successfully without causing some distortion to the images or layout or completely blanked images.

Was wondering if anyone can help me with this?

2

@UrbanB

Follow the instruction as per the guide:

https://avada.io/shopify/devdocs/modify-the-code-for-your-product-images.html

Thank you,

Tejas

1 Like
3

Dear Tejas,

I actually followed the link provided but I could not get it to hover to
the second image at all. Also, I saw many other people posting on the
community that mentions the link does not work for the Brooklyn theme?

But when i followed this link:
https://community.shopify.com/c/Shopify-Design/Hover-Effect-doesn-t-work-in-Brooklyn-Theme/td-p/388300,
i managed to get the hover, but both images became very light coloured so i
just reverted everything to original for now.

Is there any other guide I can follow?

Kind Regards,
Tresa Lee

4

@UrbanB

Send me your store URL, I will send the request for the Shopify collaborate account so I can access the theme file and fix it from my side.

Thank you,

Tejas

1 Like
5

Dear Tejas,

Thanks for your help.

Store URL as below:
https://urbanbeautylashes.com/?_cd=335f7a55293833f6c768802d4bc57242f68edb56d694402489842149a634dc85&_uid=54605381800&preview_theme_id=

password: laowhe

Kind Regards,
Tresa Lee

6

@UrbanB

I sent you request for the Shopify collaborate account, accept it so I can add hover effect.

Thank you,

Tejas

1 Like
7

Dear Tejas,

I’ve accepted the collaboration account, sorry for the late reply.

Love & Regards,
Urban Beauty Team | *https://urbanbeauty-ny.myshopify.com
*

8

@UrbanB

Done! check it now! :slightly_smiling_face:

Cheers,

Tejas

1 Like
9

Dear Tejas,

Thanks for the help! Saw it, it works! but the 2nd image seems a bit
squashed, is there any way to help fix it?

Kind Regards,
Tresa Lee

10

@UrbanB

I did little change for images, check it now.

Thank you,

Tejas

11

Dear Tejas,

Thanks for the assistance! It works well now.

Kind Regards,
Tresa Lee

12

Hello,

I tried your solution but it didn’t work..

Could you help me ?

Thanks for you help and have a nice day ! :grinning_face_with_smiling_eyes:

13

@Mathias08

Send me an email, I will help you to fix it.

Thank you,

Tejas

14

Hi Tejas, Could you please help me with this problem adding hover effect to Broocklyn Theme. Here is my shop https://leder-schmidt-2020.myshopify.com

Thank you so so much

15

hey @Tejas_Nadpara

I’m pretty sure I’ve read through every article regarding getting a hover effect on product images using Brooklyn theme to no avail.
Coming across this post was promising, is there a way you could look at my theme and spread your magic on my store as well?

Store: https://lizanneshome.com/
PW: Angrycat

Thank you so much in advance!

16

Hi, I exactly followed the instructions but the code doesn’t seem to work on mine. Any kind of help would be great!

17

Hello Teja, Could you help me do the same on my site please??

18

Hi,

I would love to do the same on my site: https://maddamstore.com/collections/phone-necklaces
Please let me know how to proceed.
Thanks

19

Hi Tejas,

Could you please help me with the same problem?

My webpage is sdesuan.com

Thank you very much!

20

Hi guys

I followed Tejas steps and it works so hope this helps you guys,

  1. First step just copy the reveal code here to your theme.scss.liquid

https://gist.github.com/carolineschnapp/63fd3c4327a466174aa8

  1. Then find your “product-grid-item.liquid”

  2. Search {% if featured_image.src== blank %} in the code

  3. It will look something like this

{% if featured_image.src== blank %}
          
        {% else %}
  1. add this code below that line
  1. so it will look like this
{% if featured_image.src== blank %}
          
        {% else %}
  1. Then find this code (which is after the above code)
  1. then add this code below
  1. so the finish will look like this

        {% if featured_image.src== blank %}
          
        {% else %}
         

          {% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

Save, you are done.

7 Likes