Brooklyn Theme Hover Effect

[UrbanB]

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? 

[Tejas_Nadpara]

@UrbanB 

Follow the instruction as per the guide:

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

Thank you,

Tejas

[UrbanB]

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/3883...,
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

[Tejas_Nadpara]

@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

[UrbanB]

Dear Tejas,

Thanks for your help.

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


password: laowhe

Kind Regards,
Tresa Lee

[Tejas_Nadpara]

@UrbanB 

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

Thank you,

Tejas

[UrbanB]

Dear Tejas,

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

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

[Tejas_Nadpara · Accepted solution]

@UrbanB 

Done! check it now! 🙂

Cheers,

Tejas

[UrbanB]

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

[Tejas_Nadpara]

@UrbanB 

I did little change for images, check it now.

Thank you,

Tejas

[UrbanB]

Dear Tejas,

Thanks for the assistance! It works well now.

Kind Regards,
Tresa Lee

[Mathias08]

Hello, 

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

Could you help me ? 

Thanks for you help and have a nice day ! 😄

[Tejas_Nadpara]

@Mathias08 

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

Thank you,

Tejas

[duymd14]

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

[BeccaBelgrave]

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!

[kristinmatias]

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

[ihusny]

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

[maddam]

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

[Sdesuan]

Hi Tejas, 

Could you please help me with the same problem? 

My webpage is sdesuan.com

Thank you very much! 

[Jaafarhana]

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

2. 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 %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}

4. add this code below that line 

   <div class="reveal">

5. so it will look like this

{% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
         <div class="reveal">

4. Then find this code (which is after the above code)

<div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>

5. then add this code below 

<img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
            </div>

6. so the finish will look like this

      <a class="grid-product__image-link{% unless featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
        {% if featured_image.src== blank %}
          <img class="grid-product__image" src="{{ featured_image.src | img_url: '1024x' }}" alt="{{ featured_image.alt | escape }}">
        {% else %}
         <div class="reveal">
          {% 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 %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ featured_image.alt | escape }}"
                   data-image>
               <img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />
            </div>
            </div>
          </div>

Save, you are done.