Hover effect for product image to show the second image

New Member
1 0 0

Hello!

I want to add a hover effect to my product page, I use Debut theme. I implemented https://ecommerce.shopify.com/c/ecommerce-design/t/hover-effect-for-product-image-to-show-the-second... and I see no difference on my website.

I think I did [ STEP1. Add CSS to your stylesheet] ok, so am guessing it's the 2nd part I'm not getting ?

My product-card-grid.liquid looks like this now (the part I've added is in bold):

 

<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 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"
            src="{{ product.featured_image | img_url: '300x300' }}"
            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"
            alt="">
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
  <div class="reveal">
    <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;">
    <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
  </div>

  </noscript>
  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price', variant: product %}

</div>

 

Any idea what's wrong / how to fix this?? Thank you!

0 Likes
New Member
1 0 0

Hi there,

 

I just had the same problem but I've figured it out.

 

The reveal part needs to go further up, not directly in front of the img tag which wasn't clear in the guide.

 

<div class="reveal">
    <div id="{{ wrapper_id }}" class="grid-view-item__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"
             src="{{ product.featured_image | img_url: '300x300' }}"
             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"
             alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>
    <img class="hidden" src="{{ product.images[1] | img_url: '450x450' }}" alt="{{ product.images[1].alt | escape }}" />
    </div>

Hope this helps!

0 Likes
Tourist
19 0 2

@glowcreativenz wrote:

Hi there,

 

I just had the same problem but I've figured it out.

 

The reveal part needs to go further up, not directly in front of the img tag which wasn't clear in the guide.

 

<div class="reveal">
    <div id="{{ wrapper_id }}" class="grid-view-item__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"
             src="{{ product.featured_image | img_url: '300x300' }}"
             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"
             alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>
    <img class="hidden" src="{{ product.images[1] | img_url: '450x450' }}" alt="{{ product.images[1].alt | escape }}" />
    </div>

Hope this helps!


I tried to do it like that, but for me it still does not work. Could you please share the whole code? 

1 Like
New Member
1 0 0

Hello,

Please put the:

<div class="reveal">

at the beginning of the code.

And put:

</div>

at the end of the code.

Then put:

<img class="hidden" src="{{ product.images[1] | img_url: '450x450' }}" alt="{{ product.images[1].alt | escape }}" />

behind <nocode> session.

Then it should work. I have tried and it worked.

 

0 Likes
New Member
1 0 0

Thanks for the help. It was what I needed!

0 Likes