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

kilshee
Tourist
7 0 2

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!

Replies 11 (11)
kilshee
Tourist
7 0 2
    <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? 

kilshee
Tourist
7 0 2

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.

Snezhana
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? 

nevvie
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!

ALPHAMOTIF
Excursionist
10 1 1

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

DiMessina
New Member
1 0 0

Efficient ! Thx a lot !

 

KMArm
Tourist
6 0 0

This is helpful! Thank you!!

KMArm
Tourist
6 0 0

I wonder if anyone has figured out how to hover with video!

Nasar
New Member
2 0 0

Thank you so much. I know absolutely nothing of coding so people like you are godsend. However, if I don't have a secondary image is shows "no image". I understand there should be some kind of IF formula in such a case..?