Hover Effect doesn´t work in Brooklyn Theme

[Make_Thinking]

Hello Shopify community, 

i need some help :). I have add the codes from the helping page (to show an alternate image):

https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images

I´ve worked on the codes in the product-grid-item.liquid and now my codes looks like this

<div class="reveal">
            <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
             <img class="hidden" src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1].alt | escape }}" />
             </div>

I have also put the css code into the theme.scss.liquid but it doesnt work at all. 

No hover effect if i show my cursor to the image.

Can you help me please and tell me where the mistake is. 

I thank you in advance.

Cheers!

[Jai1]

Hi 

Here need to write code in your theme file so if you want we can help you for sort out above issue.

[SD3]

Here you go:

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

          {% include 'image-style' with image: product.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: product.featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   src="{{ product.featured_image | img_url: 'grande' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.featured_image.alt | escape }}">

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


              </div>
            </div>           
          </div>
 
          <noscript>
 <img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
 </noscript>

Enjoy!

[Men_s_Conglomer]

It works! Thanks!

[Senne_Dehandsch]

Thank you so much! 

[Fatima1]

Hi guys,

This is probably a dumb question but do I add SD's code to the product-grid-item.liquid?

Would it be to replace Shopify's code for image hover or at the end of the product-grid-item.liquid?

Thanks a lot :)

[Byhusted]

Hello guys

After adding the hover effect to my shop, my pictures are getting smaller.
As you can see there is a background behind every picture

Anyone that can help solving this?

The website is: byhusted.myshopify.com
The code: rat29rsh

[tannibunni]

it works well! thanks!!

[Anyja]

Hi,

How did you get the hover effect to work?

I am having the same issue. Also using the Brooklyn theme. Tried several ways, but nothing seem to add the hover effect. I would like for my last product image to show on hover.

Which code did you paste into the theme.scss.liquid (I am guessing at the bottom of the code) and which code did you add to the product-grid-item.liquid?

Best,

Anna

[ajmp45]

Im new to this community and its hard to navigate around so sorry in advance for just jumping in. But I currently have the Brooklyn theme on my page and the numbers on the bottom of the page doest bold when i go from one page to the next. It makes it really hard to know what page I'm on and i want to fix this before I launch my store. Can someone please help. @Ryan45