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

kilshee
Tourist
7 0 1

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
kilshee
Tourist
7 0 1
    <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
kilshee
Tourist
7 0 1

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? 

0 Likes
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!

0 Likes
ALPHAMOTIF
Excursionist
11 1 1

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

0 Likes
DiMessina
New Member
1 0 0

Efficient ! Thx a lot !

 

0 Likes
KMArm
Tourist
3 0 0

This is helpful! Thank you!!

0 Likes
KMArm
Tourist
3 0 0

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

0 Likes