Brooklyn Theme Hover Effect

Solved
UrbanB
Tourist
6 0 0

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? 

Accepted Solution (1)

Accepted Solutions
Tejas_Nadpara
Shopify Partner
1087 216 529

This is an accepted solution.

@UrbanB 

 

Done! check it now! 🙂

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help

View solution in original post

Replies 31 (31)
Tejas_Nadpara
Shopify Partner
1087 216 529

@UrbanB 

 

Follow the instruction as per the guide:

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

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
UrbanB
Tourist
6 0 0
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
Shopify Partner
1087 216 529

@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

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

Thanks for your help.

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


password: laowhe

Kind Regards,
Tresa Lee
Tejas_Nadpara
Shopify Partner
1087 216 529

@UrbanB 

 

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

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
UrbanB
Tourist
6 0 0
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
Shopify Partner
1087 216 529

This is an accepted solution.

@UrbanB 

 

Done! check it now! 🙂

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
UrbanB
Tourist
6 0 0
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
Shopify Partner
1087 216 529

@UrbanB 

 

I did little change for images, check it now.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
UrbanB
Tourist
6 0 0
Dear Tejas,

Thanks for the assistance! It works well now.

Kind Regards,
Tresa Lee
Mathias08
New Member
4 0 0

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
Shopify Partner
1087 216 529

@Mathias08 

 

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

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
duymd14
New Member
2 0 0

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
Tourist
8 0 3

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
New Member
3 0 0

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

ihusny
New Member
1 0 0

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

maddam
Excursionist
12 0 5

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
Excursionist
48 0 10

Hi Tejas, 

 

Could you please help me with the same problem? 

 

My webpage is sdesuan.com

 

Thank you very much! 

Jaafarhana
Tourist
4 0 6

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.