How do you change the product hover effect in Narrative theme?

Highlighted
New Member
7 0 0

Hey All,

I recently just started another store and I really like the narrative theme which I have been working on. But I need help to change the Hover effect over the product images from the scale up to having it switch to the second image loaded in the products.

Can anyone help me with this please????

 

Thanks so much in advance!

0 Likes
Highlighted
New Member
7 0 0
    <div class="reveal">
    <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
    <div class="hidden">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.images[1] | escape }}" />
      </div></div>

this is as far as i've gotten, it shows both images, I need it to switch from one to another with hovering and unhovering.

Can anyone help? 

0 Likes
Highlighted
New Member
7 0 0

Nevermind guys I figured it out,

in case anyone needs to know how to achieve this, simply replace this

    {% if product.featured_image %}
      {% include 'card-image', type: product.featured_image %}
    {% endif %}

with this

<img src="{{ product.featured_image | product_img_url: 'large' }}" onmouseover="src='{{ product.images[1] | product_img_url: 'large' }}'" onmouseout="src='{{ product.featured_image | product_img_url: 'large' }}'" alt="{{product.title}}">

in the product-card.liquid file in snippets.

0 Likes
Highlighted
New Member
2 0 0

Hi kilshee, I tried to use your code but it didn't work for me. Have you changed anything in it since your post here? 

0 Likes
Highlighted
New Member
1 0 0

I honestly appreciate it that you still wrote after you figured out! You saved me so much time since I was trying to figure this out for the Narrative template. It is a beautiful template but these kinds of things are not so easy to adjust. Thanks so much!

0 Likes
Tourist
9 1 0

**bleep** life saver!  This instantly worked!

0 Likes