Hover Effect doesn´t work in Brooklyn Theme

Highlighted
Tourist
4 0 2
hi Anna,

first u add reveal code on the buttom of theme.scss.liquid
code from here:
*https://gist.github.com/carolineschnapp/63fd3c4327a466174aa8
*


and you go to product-grid-item.liquid
search for " {% include 'image-style' with image: product.featured_image"

add
before this line.



and later you add



{{ product.images.last.alt | escape }}





after

alt="{{ product.featured_image.alt | escape }}">


the whole code should look like this( text in color are added)





{% 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 %}







src="{{ product.featured_image | img_url: '150x150' }}"
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 }}">


*{{ product.images.last.alt | escape }}*





hope it work for you



1 Like
Highlighted
Tourist
15 0 0

@Ryan45 if you can message me separately that would be great, I seen you helping a-lot of other people and I wasn't sure how to reach out. Again thanks for your help. 

0 Likes
Highlighted
Tourist
15 0 0

what code do i take from the link you gave me ? do you mind showing me?

0 Likes
Highlighted
Tourist
6 0 1

Hi,

 

@tannibunni 

Thanks, but I seem to have a problem viewing the items you sent in the answer. tried Chrome and safari but it looks like the images that you attached are missing. 

 

Could you please please send it to me by email? anna@byannawais.com

 

Thank you very much for your help and I am really crossing my fingers that this code gets it done :)

 

best,

Anna

0 Likes
Highlighted
Tourist
15 0 0

where do i put this code ?

0 Likes
Highlighted
New Member
1 0 0

Hi @Anyja , did you receive the info by email from @tannibunni ?

If so, could you please send it to me? I'm really hoping to fix this problem in my store.

I have followed the instructions of the same link you did, but they didn't work. https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images#reve...

My email is admin@buysoars.com

Much appreciated.

0 Likes
Highlighted
Tourist
7 0 0

Finally! It worked. Thank you so much!!

0 Likes
Highlighted
New Member
3 0 0

It gives me an error that the if statement is not closed.

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless product.featured_image == blank %}
    {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  <div class="product-card__image-with-placeholder-wrapper" data-image-with-placeholder-wrapper>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ product.featured_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ product.featured_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
    <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
<div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}"></div>
  {% include 'product-price', variant: product %}

</div>

That's my code (without adding the one you posted because I can't add it)

0 Likes
Highlighted
New Member
1 0 0

Thank you for this solution, it really helped me

0 Likes