Hover Effect doesn´t work in Brooklyn Theme

Highlighted
New Member
2 0 0

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!

0 Likes
Highlighted
Excursionist
92 0 10

Hi 

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

shoot mail if you need any help : jaygandhi0692@gmail.com
0 Likes
Tourist
3 0 10

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!

7 Likes
Highlighted
Shopify Partner
5 0 0

It works! Thanks!

#ConglomerateMan
0 Likes
Highlighted
Shopify Partner
2 0 0

Thank you so much! 

0 Likes
Highlighted
Excursionist
28 0 4

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 :)

0 Likes
Highlighted
New Member
9 0 0

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

0 Likes
Highlighted
Tourist
4 0 2

it works well! thanks!!

0 Likes
Highlighted
Tourist
6 0 1

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

 

 

0 Likes
Highlighted
Tourist
15 0 0

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 

0 Likes